@inkline/icons
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.5 • Public • Published

    Inkline logo

    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


    npm version Build Coverage Status Downloads Discord



    Table of contents

    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/build/packs/bootstrap

    CoreUI Icons

    • License: CC BY 4.0
    • Variants:
      • Prefix: cib
        Import: @inkline/icons/build/packs/coreui/brands
      • Prefix: cif
        Import: @inkline/icons/build/packs/coreui/flag
      • Prefix: cil
        Import: @inkline/icons/build/packs/coreui/linear
      • Prefix: *
        Import: @inkline/icons/build/packs/coreui

    CryptoCurrency Icons

    • License: CC0 1.0 Universal
    • Variants:
      • Prefix: cc
        Import: @inkline/icons/build/packs/cryptocurrency/regular
      • Prefix: ccc
        Import: @inkline/icons/build/packs/cryptocurrency/color
      • Prefix: cci
        Import: @inkline/icons/build/packs/cryptocurrency/icon
      • Prefix: *
        Import: @inkline/icons/build/packs/cryptocurrency

    FontAwesome Icons

    • License: CC BY 4.0
    • Variants:
      • Prefix: fab
        Import: @inkline/icons/build/packs/fontawesome/brands
      • Prefix: far
        Import: @inkline/icons/build/packs/fontawesome/regular
      • Prefix: fas
        Import: @inkline/icons/build/packs/fontawesome/solid
      • Prefix: *
        Import: @inkline/icons/build/packs/fontawesome

    Flat Color Icons

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

    Flag Icons

    • License: MIT
    • Variants:
      • Prefix: fi
        Import: @inkline/icons/build/packs/flag/4x3
      • Prefix: fis
        Import: @inkline/icons/build/packs/flag/1x1
      • Prefix: *
        Import: @inkline/icons/build/packs/flag

    Heroicons

    • License: MIT
    • Variants:
      • Prefix: his
        Import: @inkline/icons/build/packs/heroicons/solid
      • Prefix: hio
        Import: @inkline/icons/build/packs/heroicons/outline
      • Prefix: *
        Import: @inkline/icons/build/packs/heroicons

    Inkline

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

    Ionicons

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

    Line Awesome

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

    Material Design Icons

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

    Primer Octicons

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

    Pixelart Icons

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

    Prime Icons

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

    Remix Icon

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

    Simple Icons

    • License: CC0 1.0 Universal
    • Variants:
      • Prefix: si
        Import: @inkline/icons/build/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.

    Copyright and license

    Code copyright 2017-2021 Inkline Icons Authors. Code released under the MIT License.

    Install

    npm i @inkline/icons

    DownloadsWeekly Downloads

    45

    Version

    1.4.5

    License

    MIT

    Unpacked Size

    217 MB

    Total Files

    322

    Last publish

    Collaborators

    • avatar