@stringke/icon-park-vue
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.9 • Public • Published

    IconPark Icons

    Vue Icons for IconPark

    Introduction

    Features

    • Provide more than 2000 icons
    • Provide 4 themes:
      • outline
      • filled
      • two-tone
      • multi-color

    More

    Please visit IconPark Website

    • Copy SVG
    • Copy React Icon component
    • Copy Vue Icon component
    • Download PNG
    • Download SVG

    Getting Started

    Install

    npm install @icon-park/vue --save
    

    Include Component

    Import an icon from @icon-park/vueat the top of a component and then use it in the template tag:

    <template>
    <home theme="filled"/>
    </template>
    <script>
    import {Home} from '@icon-park/vue';
    
    export default {
        components: {
            Home
        }
    }
    </script>

    If you don't want to refer to it, you can install icons globally.

    import {install} from '@icon-park/vue/es/all';
    import Vue from 'vue';
    
    // Install
    install(Vue); // use default prefix 'icon', eg: icon is People, name is icon-people.
    install(Vue, 'i'); // use custom prefix 'i', eg: icon is People, name is i-people.

    Style Sheet

    Import the icon style:

    import '@icon-park/vue/styles/index.css';

    Global Config

    You can use the 'provide' property provided by Vue to set the global configuration.

    <template>
    <div>
    <home/>
    </div>
    </template>
    <script lang="ts">
    import {DEFAULT_ICON_CONFIGS} from '@icon-park/vue'
    import {Home} from '@icon-park/vue';
    
    const IconConfig = {...DEFAULT_ICON_CONFIGS, prefix: 'icon'}
    
    export default {
        name: 'App',
        provide () {
            return {
                ICON_CONFIGS: IconConfig
            }
        },
        components: {
            Home
        }
    };
    </script>

    Import on Demand

    You can use babel-plugin-import to import icons on demand.

    Set config like this:

    {
        "plugins": [
            [
                "import",
                {
                    "libraryName": "@icon-park/vue",
                    "libraryDirectory": "es/icons",
                    "camel2DashComponentName": false 
                }
            ]
        ]
    }

    Icon Component

    We recommend loading icons on demand, because this can greatly reduce the volume of compiled code。 However, in some scenarios similar to remote loading menus, direct reference to all icons can reduce the development cost.

    Usage:

    <template>
    <icon-park type="AddText" theme="filled"/>
    <icon-park type="add-text" theme="filled"/>
    </template>
    <script>
    import {IconPark} from '@icon-park/vue/es/all';
    
    export default {
        components: {
            IconPark
        }
    }
    </script>

    Embed IconPark in your project

    If you need to use additional information such as icon name, author, category, label and creation time, you can use the icons.json file located in the root directory of each NPM.

    Props

    prop description type default note
    theme Theme of the icons. 'outline' | 'filled' | 'two-tone' | 'multi-color' 'outline'
    size The width/height of the icon number | string '1em'
    spin Rotate icon with animation boolean false
    fill Colors of theme string | string[] 'currentColor'
    strokeLinecap the stroke-linecap prop of svg element 'butt' | 'round' | 'square' 'round'
    strokeLinejoin the stroke-linejoin prop of svg element 'miter' | 'round' | 'bevel' 'round'
    strokeWidth the stroke-width prop of svg element number 4

    Install

    npm i @stringke/icon-park-vue

    DownloadsWeekly Downloads

    2

    Version

    1.3.9

    License

    Apache-2.0

    Unpacked Size

    9.85 MB

    Total Files

    9771

    Last publish

    Collaborators

    • stringke