@inkline/icons NPM

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.

Bootstrap Icons

License: MIT
Variants:
- Prefix: bi Import: @inkline/icons/packs/bootstrap

CoreUI Icons

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

CryptoCurrency Icons

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

FontAwesome Icons

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

Flat Color Icons

License: MIT / Good Boy
Variants:
- Prefix: fc Import: @inkline/icons/packs/flat-color

Flag Icons

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

Heroicons

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

Inkline

License: MIT
Variants:
- Prefix: ink Import: @inkline/icons/packs/inkline

Ionicons

License: MIT
Variants:
- Prefix: ion Import: @inkline/icons/packs/ionicons

Line Awesome

License: MIT
Variants:
- Prefix: la Import: @inkline/icons/packs/lineawesome

Material Design Icons

License: Apache 2.0
Variants:
- Prefix: mdi Import: @inkline/icons/packs/material-design

Primer Octicons

License: MIT
Variants:
- Prefix: oi Import: @inkline/icons/packs/octicons

Pixelart Icons

License: MIT
Variants:
- Prefix: px Import: @inkline/icons/packs/pixelart

Prime Icons

License: MIT
Variants:
- Prefix: pi Import: @inkline/icons/packs/prime

Remix Icon

License: Apache 2.0
Variants:
- Prefix: ri Import: @inkline/icons/packs/remix

Simple Icons

License: CC0 1.0 Universal
Variants:
- Prefix: si Import: @inkline/icons/packs/simple

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.

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.