iconPark的使用

9月份字节跳动推出了iconPark图标，可以直接支持Vue，React。于是我就尝试了下，发现确实好用。我使用的格式是svg格式也支持直接使用图片。
官网：https://iconpark.bytedance.com/

image.png

在vue 还有 react中使用的话只需要去官网复制代码直接项目使用就ok，代码往往很简洁比如：

<mail theme="outline" size="24" fill="#333"/>

这就是一个邮件的svg icon,
使用步骤：（官网有教程我这里只记录vue的）

1、安装包：

Vue3.0: npm i @icon-park/vue-next --save
Vue2.x: npm i @icon-park/vue --save

2、直接引用使用

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

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

3.0的使用差不多

3、如果想全局调用需要在main.js调用:

Vue2.x: (这里的'svg'是自己给的自定义组件前缀也可以默认为空。)

import { install } from '@icon-park/vue/es/all';
install(Vue, 'svg');
Vue.use(VueRouter)

现在可以直接在各个组件页面使用，不需要在像第二步单独引用要使用的每个组件

<svg-home theme="filled"/>

(如果没有给自定义前缀就是默认的home)
Vue3.0:

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

const app = createApp({});

// Install
install(app); // use default prefix 'icon', eg: icon is People, name is icon-people.
install(app, 'i'); // use custom prefix 'i', eg: icon is People, name is i-people.

app.mount('#app');

注：vue3.0 的vite版本，我用的时候icon是没有渲染上，抛出了一个警告说组件未加载，还不知道为什么如果知道可以告诉我。

总结一下就是，使用起来确实很方便，只需要安装一个包就可以直接使用svg的图标，不需要自己去下载svg图片，也不需要去做svg的公共组件来做，但是缺点也很明显，就是现在只能使用官网给的图标，无法使用自己项目要用的图标，灵活性不够，但愿字节能优化一下加个自己的项目图标管理像阿里一样，这样就是真的香了。

21-11-1更新文章，现在已经有个人图标管理了，但是和阿里的没有什么区别并不能像官方图标那样复制vue代码直接使用，所以感觉还是成熟的阿里更推荐一点，以后在看看