字节图标iconpark在vue3中的使用

字节图标在vue3中的使用

官方图标库ByteDance IconPark (oceanengine.com)

使用指南Docs (feishu.cn)

安装

npm install @icon-park/vue-next --save

引入样式

在main.js里面引入样式

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

使用

将刚才复制的代码应用到你的vue组件里面

<template>
  <doc-search-two theme="multi-color" size="24" :fill="['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']" strokeLinecap="butt"/>
</template>

然后在script标签里面导入我们所用的组件，格式为开头字母大写，去掉斜杠，斜杠后面的字母要大写，引入完后不要忘了注册组件比如如下：

<script>
import {DocSearchTwo} from '@icon-park/vue-next';

export default {
  name: "Person",
  components:{
    DocSearchTwo
  },
}
</script>

结果图