Like heroicons? Here’s an excellent heroicon for ❤️ Vue.js component!


Like heroicons? Here's an excellent heroicon for ❤️ Vue.js component!
An open source high quality SVGs Vue component icon library free of charge using MIT open source protocol!

  • 100% no other project dependency

  • 100% compatible with vue.js installed by CDN


    I like heroicons very much, because the design is really exquisite. At first it was from directly get SVG code written to the project, later found that it is really inconvenient! Find the package of heroicon for vue.js. Just a little. That bag is really not good. I guess I’m useless.

  • Document website:

  • GitHub warehouse:


  • Npm:npm i @bytegem/vue-heroicons -S

  • Yarn: yarn add @bytegem/vue-heroicons

    Register Vue components

    import Vue from 'vue';
    import Heroicons from '@bytegem/vue-heroicons';


    <HeroIconAdjustmentsOutline />
    <hero-icon-adjustments-outline />

    Hump naming and middle horizontal line naming are OK, but vue.js handles it by itself


    Heroicon has 150 icons in two styles: 24px outline style and 20px solid style

    You can do it in the icon button on the website to copy Vue component tag! Then paste it where you need it.

    Why not make font icons?

    First of all, SVGs have the advantages of SVG, and font icon has the advantages of font icon. Obviously, I prefer to use SVG directly, because DOM is controllable!

    Other plans

    After that, we are going to make the SVGs of heroicons into flutter widgets to be used as the logo library.


    If you like heroicon, please order a star for heroicon. If you like the Vue component icon package, please click on GitHub us a star

    guarantee’s a package that we all use in our own commercial projects. We will check whether heroicon is updated regularly and update this package. The original intention of this bag is easy to use!

    Say more

    How is this package developed? In fact, the core content of this package is a Vue installer, just a few lines of code. Vue components are all generated with code.

Packaged@vue/cliTools. SVGs is the SVG code of heroicon collected directly by cli! Interested to see GitHub warehouse@vue/cli/plugin.jsCode

This work adoptsCC agreementReprint must indicate the author and the link of this article

Seven’s code is too mucky, welcome to pay attention to my new expansion packagemedz/corsSolve the cross domain requirements of PHP project program settings.

Recommended Today

[reprint] deeply understand proxy and defineproperty

it is reportedVue3.0The official version of will be released this month (August). There is still a transition period from the release to the official project, but we can’t wait until nowVue3Only when you are formally involved in the project can you learn, learn in advance, so that you can master it fasterVue3.0It’s up to you […]