README

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

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.

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.

@inkline/iconsdeprecated

Usage no npm install needed!