IconPark 图标

IconPark图标体系

介绍

新特性

• 提供超过2000图标
• 支持4种主题:
  • 线性
  • 填充
  • 双色
  • 四色

更多图标

请访问IconPark图标网站, 提供更多便捷的操作：

• 复制SVG源文件
• 复制React图标组件
• 复制Vue图标组件
• 下载PNG
• 下载SVG

快速上手

安装

npm install @icon-park/vue --save

引用图标

在组件的上方引用@icon-park/vue，并在组件的模板函数中使用:

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

export default {
    components: {
        Home
    }
}
</script>

如果你不想引用，那么你可以全局安装图标

import {install} from '@icon-park/vue/es/all';
import Vue from 'vue';

// Install
install(Vue); // 默认前缀是 'icon', 例如: 对于`People`这个icon, 组件名字是`icon-people`.
install(Vue, 'i'); // 使用自定义前缀'i', 例如: 对于`People`这个icon，组件名字是`i-people`.

Style Sheet

引用预设样式

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

全局

你可以使用Vue提供的provide属性来设置全局配置。

<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>

按需加载

可以使用babel-plugin-import来按需加载图标

配置如下:

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

使用Icon组件

我们更推荐使用按需加载的方式来加载图标，因为这样可以大幅度缩减编译后代码体积， 但是在有些类似远程加载的菜单的场景下，直接引用全部图标可以缩减开发成本。

使用方式：

<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>

将IconPark嵌入到你的项目中

如果你的项目中需要使用到图标名称，作者，分类，标签以及创建时间等额外的信息，你可以使用位于每个NPM根目录的icons.json文件。

属性

| 属性名称 | 介绍 | 类型 | 默认值 | 注释 | | ---------- | --- | --- | --- | --- | | theme | 图标主题 | 'outline' | 'filled' | 'two-tone' | 'multi-color' | 'outline' | | size | 图标的大小，宽高相同 | number | string | '1em' | | spin | 给图标加旋转效果 | boolean | false | | fill | 图标的颜色，不超过4个颜色，默认为当前颜色 | string | string[]| 'currentColor' | | strokeLinecap | svg元素的stroke-linecap属性 | 'butt' | 'round' | 'square' | 'round' | | strokeLinejoin | svg元素的stroke-linejoin属性 | 'miter' | 'round' | 'bevel' | 'round' | | strokeWidth | svg元素的stroke-width属性 | number | 4 |