iconPark的使用
9月份字节跳动推出了iconPark图标,可以直接支持Vue,React。于是我就尝试了下,发现确实好用。我使用的格式是svg格式也支持直接使用图片。官网:https://iconpark.bytedance.com/在vue 还有 react中使用的话只需要去官网复制代码直接项目使用就ok,代码往往很简洁比如:<mail theme="outline" size="24" fill="#3
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的公共组件来做,但是缺点也很明显,就是现在只能使用官网给的图标,无法使用自己项目要用的图标,灵活性不够,但愿字节能优化一下加个自己的项目图标管理像阿里一样,这样就是真的香了。
更多推荐
所有评论(0)