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

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

安装

npm install @icon-park/vue --save

按需引入

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

<template>
<alarm theme="outline"  />
</template>
<script>
/**
 * 引入时使用驼峰式命名
 * import {Alarm} from '@icon-park/vue';
 * components: {   Alarm   }
 *
 * 使用时使用小写
 *<alarm theme="outline" size="24" fill="#f60" />
 */
import {Alarm} from '@icon-park/vue';

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

官方图标库

一些简单的引用示例：

<template>
  <div class="demo">
    <home theme="outline" />
    <harm theme="filled" size="20" />
    <alarm theme="two-tone" size="30" fill="#f60" />
    <email-successfully theme="multi-color" size="36" fill="#f60" />
  </div>
</template>

<script>
import { Home, Harm, Alarm, EmailSuccessfully } from '@icon-park/vue'
export default {
  components: {
    Home,
    Harm,
    Alarm,
    EmailSuccessfully
  }
}
</script>

示例图标

全局引入

在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中引入

<template>
  <div id="app">
    <demo></demo>
  </div>
</template>

<script>
import { DEFAULT_ICON_CONFIGS } from '@icon-park/vue'
// 把全局需要注册的图标放在这个位置
import { Home } from '@icon-park/vue'
// 使用Vue提供的`provide`属性来设置全局配置。
const IconConfig = { ...DEFAULT_ICON_CONFIGS, prefix: 'icon' }

export default {
  name: 'App',
  components: {
    [Home.name]: Home,  // 使用此方法引入可以出现注册未使用的报错情况
    demo: () => import('./components/demo.vue')
  },
  provide() {
    return {
      ICON_CONFIGS: IconConfig
    }
  }
}
</script>

将IconPark嵌入到你的项目中

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

图标属性