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

在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的公共组件来做,但是缺点也很明显,就是现在只能使用官网给的图标,无法使用自己项目要用的图标,灵活性不够,但愿字节能优化一下加个自己的项目图标管理像阿里一样,这样就是真的香了。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐