字节跳动图标库（IconPark ）在vue中的使用

IconPark 图标官网：https://iconpark.bytedance.com/
IconPark Vue官方使用说明： https://www.jianshu.com/p/c5d7215bd991

安装

npm install @icon-park/vue --save

按需引入

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

官方图标库

一些简单的引用示例：

示例图标

全局引入

在main.js中引入

import Vue from 'vue'
import App from './App.vue'

// 引入所有官方图标
import { install } from '@icon-park/vue/es/all'

// 对引入图标进行安装
install(Vue) // 默认前缀是 'icon', 例如: 对于`People`这个icon, 组件名字是`icon-people`.
install(Vue, 'i') // 使用自定义前缀'i', 例如: 对于`People`这个icon，组件名字是`i-people`.

// 引入图标库样式
import '@icon-park/vue/styles/index.css'

new Vue({
  render: h => h(App)
}).$mount('#app')

在app.vue中引入

将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