oh-vue-icons
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.7 • Public • Published

    Oh, Vue Icons!

    npm downloads license

    English | 中文说明

    A Vue component for including inline SVG icons from different popular icon packs easily.

     

    Features

    • Supports tree-shaking, which allows you to only import the used icons
    • Supports Vue 2 and Vue 3
    • Supports 30000+ icons from 20 popular icon packs, see here

     

    Supported Icon Packs

    Now the following 20 icon packs are supported:

    Icon Pack Prefix License Icon Numer
    academicons ai SIL OFL 1.1 145
    Bootstrap Icons bi MIT 1370
    CoreUI Icons Free (Colorful) co CC BY 4.0 License 1575
    Cryptocurrency Icons (Colorful) ci CC0 1.0 Universal 942
    Font Awesome 5 Free fa CC BY 4.0 1610
    Flat Color Icons (Colorful) fc MIT / Good Boy 329
    Flag Icon (Colorful) fi MIT 516
    gameicons gi CC BY 3.0 4040
    Heroicons hi MIT 460
    Ionicons io MIT 1332
    Line Awesome la MIT 1544
    Material Design icons md Apache 2.0 9047
    Octicons oi MIT 229
    Pokemon Icons (Colorful) pi CC BY 4.0 1453
    PrimeIcons pr MIT 202
    Pixelarticons px MIT 460
    Remix Icon ri Apache 2.0 2271
    Simple Icons si CC0 1.0 Universal 1978
    VSCode Icons (Colorful) vi CC BY-SA 4.0 1084
    Weather Icons wi SIL OFL 1.1 219

     

    Documentation

    Search for icons and view the documentation here.

     

    Installation

    yarn add oh-vue-icons
    # or
    npm install oh-vue-icons

     

    Import

    Global Import

    Import oh-vue-icons and install it into Vue in main.js. You can only import the icons you need to reduce the bundle size.

    Vue 2

    // main.js
    import Vue from "vue";
    import App from "./App.vue";
    import OhVueIcon from "oh-vue-icons";
    
    import { FaFlag, RiZhihuFill } from "oh-vue-icons/icons";
    OhVueIcon.add(FaFlag, RiZhihuFill);
    
    Vue.component("v-icon", OhVueIcon);
    
    new Vue({
      render: h => h(App)
    }).$mount("#app");

    If you don't care about the bundle size and want to import a whole icon pack, you may should:

    // main.js
    // import Font Awesome
    import * as FaIcons from "oh-vue-icons/icons/fa";
    
    const Fa = Object.values({ ...FaIcons });
    OhVueIcon.add(...Fa);

    Vue 3

    // main.js
    import { createApp } from "vue";
    import App from "./App.vue";
    import OhVueIcon from "oh-vue-icons/dist/v3/icon.es";
    
    import { FaFlag, RiZhihuFill } from "oh-vue-icons/icons";
    OhVueIcon.add(FaFlag, RiZhihuFill);
    
    const app = createApp(App);
    app.component("v-icon", OhVueIcon);
    app.mount("#app");

     

    Local Import

    // Vue 2
    import OhVueIcon from "oh-vue-icons";
    // or Vue 3
    import OhVueIcon from "oh-vue-icons/dist/v3/icon.es";
    
    export default {
      components: {
        "v-icon": OhVueIcon
      }
    };

     

    Usage

    The icon names should be passed using kebab-case.

    <template>
      <div>
        <v-icon name="fa-flag" />
        <v-icon name="ri-zhihu-fill" />
      </div>
    </template>

    For Font Awesome 5 icons, icons from regular pack have name prop values like fa-regular-flag. Icons from solid and brands pack have name prop values like fa-beer and fa-github.

    See the documentation for more about the usage.

     

    Props

    Name Description Type Accepted Values Default value
    scale Icon size number / 1
    animation Type of animation string wrench / ring / pulse / spin / spin-pulse / flash / float /
    speed Animation speed string slow / fast /
    hover Enable animation only when being hovered boolean true / false false
    flip Used to flip icon string vertical / horizontal / both /
    fill Fill color of icon string HEX color code or color name currentColor
    label Icon lable string / /
    title Icon title string / /
    inverse Make icon color white? boolean true / false false

    Some examples could be found in the documentation.

     

    Nuxt.js

    When using Nuxt.js, oh-vue-icons should be added to the transpile build option in nuxt.config.js:

    export default {
      // ...
      build: {
        transpile: ["oh-vue-icons"]
      }
    }

    or it will not be bundled, see Nuxt's documentation for details.

     

    Contributing

    Contributions are welcomed, learn how to contribute here.

     

    Acknowledgements

     

    License

    This project is MIT licensed. Icons are taken from other projects, so check the license of each accordingly.

    Install

    npm i oh-vue-icons

    DownloadsWeekly Downloads

    270

    Version

    0.4.7

    License

    MIT

    Unpacked Size

    43.6 MB

    Total Files

    75

    Last publish

    Collaborators

    • renovamen