Inkline Icons
Inkline Icons provides you with an awesome, maintainable Universal Vue.js 3 Icon Component with thousands of icons from more than 15 icon packs. Inkline is written and maintained by @alexgrozav.
Homepage
·
Documentation
·
Issue Tracker
Table of contents
- Installation
- Usage
- Packs
- Bugs and feature requests
- Contributing
- Community
- Releases
- Versioning
- Creators
- Copyright and license
Installation
Read the Icon Documentation page and find information on how to import and use the icon component.
To install the package standalone:
npm install @inkline/icons
Next, you can either import and register individual icons, or you can import and register icon packs as a whole.
Importing individual icons (tree-shaking)
This approach allows you to select the icons you want to register individually, resulting in a smaller bundle size.
import { createApp } from 'vue';
import { InklineIcons, fasCheck, fasHome } from '@inkline/icons';
import App from './App.vue';
const app = createApp(App);
InklineIcons.add({
fasCheck,
fasHome
});
app.use(InklineIcons);
app.mount('#app');
Importing icon packs
This approach allows you to register icon packs as a whole, best suited for saving time when prototyping your application.
import { createApp } from 'vue';
import { InklineIcons } from '@inkline/icons';
import * as fontAwesomeIcons from '@inkline/icons/packs/fontawesome';
import * as materialDesignIcons from '@inkline/icons/packs/material-design';
import App from './App.vue';
const app = createApp(App);
InklineIcons.add({
...fontAwesomeIcons,
...materialDesignIcons
});
app.use(InklineIcons);
app.mount('#app');
Usage
Icons are available to be used by constructing SVGs using the Universal Vue.js 3 Icon Component or as a CSS mask, perfect for any use case.
Component
Using @inkline/icons
is very straightforward. Simply specify the imported icon name:
<i-icon name="fa-check" />
Scss
You can also import the icons as data svg scss variables and use them as masks:
@import '~@inkline/icons/packs/inkline.scss';
.icon {
width: 16px;
height: 16px;
mask-size: 16px 16px;
mask-image: url($ink-chevron-down);
mask-position: center center;
mask-repeat: no-repeat;
background-color: black;
}
Packs
There are over 15 available free icon packs, and even more will be added in the future.
- License: MIT
- Variants:
- Prefix:
bi
Import:@inkline/icons/packs/bootstrap
- Prefix:
- License: CC BY 4.0
- Variants:
- Prefix:
cib
Import:@inkline/icons/packs/coreui/brands
- Prefix:
cif
Import:@inkline/icons/packs/coreui/flag
- Prefix:
cil
Import:@inkline/icons/packs/coreui/linear
- Prefix:
*
Import:@inkline/icons/packs/coreui
- Prefix:
- License: CC0 1.0 Universal
- Variants:
- Prefix:
cc
Import:@inkline/icons/packs/cryptocurrency/regular
- Prefix:
ccc
Import:@inkline/icons/packs/cryptocurrency/color
- Prefix:
cci
Import:@inkline/icons/packs/cryptocurrency/icon
- Prefix:
*
Import:@inkline/icons/packs/cryptocurrency
- Prefix:
- License: CC BY 4.0
- Variants:
- Prefix:
fab
Import:@inkline/icons/packs/fontawesome/brands
- Prefix:
far
Import:@inkline/icons/packs/fontawesome/regular
- Prefix:
fas
Import:@inkline/icons/packs/fontawesome/solid
- Prefix:
*
Import:@inkline/icons/packs/fontawesome
- Prefix:
- License: MIT / Good Boy
- Variants:
- Prefix:
fc
Import:@inkline/icons/packs/flat-color
- Prefix:
- License: MIT
- Variants:
- Prefix:
fi
Import:@inkline/icons/packs/flag/4x3
- Prefix:
fis
Import:@inkline/icons/packs/flag/1x1
- Prefix:
*
Import:@inkline/icons/packs/flag
- Prefix:
- License: MIT
- Variants:
- Prefix:
his
Import:@inkline/icons/packs/heroicons/solid
- Prefix:
hio
Import:@inkline/icons/packs/heroicons/outline
- Prefix:
*
Import:@inkline/icons/packs/heroicons
- Prefix:
- License: MIT
- Variants:
- Prefix:
ink
Import:@inkline/icons/packs/inkline
- Prefix:
- License: MIT
- Variants:
- Prefix:
ion
Import:@inkline/icons/packs/ionicons
- Prefix:
- License: MIT
- Variants:
- Prefix:
la
Import:@inkline/icons/packs/lineawesome
- Prefix:
- License: Apache 2.0
- Variants:
- Prefix:
mdi
Import:@inkline/icons/packs/material-design
- Prefix:
- License: MIT
- Variants:
- Prefix:
oi
Import:@inkline/icons/packs/octicons
- Prefix:
- License: MIT
- Variants:
- Prefix:
px
Import:@inkline/icons/packs/pixelart
- Prefix:
- License: MIT
- Variants:
- Prefix:
pi
Import:@inkline/icons/packs/prime
- Prefix:
- License: Apache 2.0
- Variants:
- Prefix:
ri
Import:@inkline/icons/packs/remix
- Prefix:
- License: CC0 1.0 Universal
- Variants:
- Prefix:
si
Import:@inkline/icons/packs/simple
- Prefix:
Bugs and feature requests
Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.
Community
Get updates on Inkline's development and chat with the project maintainers and community members.
- Follow @inkline on Twitter.
- Join Inkline on Discord.
- Join Discussions on GitHub.
Releases
Previous releases and their documentation are also available for download.
Versioning
For increased transparency and backward compatibility, Inkline is maintained under the Semantic Versioning guidelines.
Creators
Alex Grozav
Contributing
Please read through our contributing guidelines. There you can find directions for opening issues, feature requests, coding standards, and how to setup a local development environment.
Thanks goes to these wonderful people.
Copyright and license
Code copyright 2017-2021 Inkline Icons Authors. Code released under the MIT License.