2021-08-30 vite使用iconify,图标任你用!
无道
2021-08-30
1 条评论
前端相关
阅读2257
手机阅读
前言
需要使用到antfu
大佬开发的vite插件
iconify
Iconify是功能最丰富的图标框架。 可以与任何图标库一起使用的统一图标框架。 开箱即用的功能包括80多个图标集和超过70,000个图标
有了iconify,基本上也不选哟iconfont了,因为其实如果你用过iconfont,会发现很多图标其实大小这些不配套,需要修改。
下载
yarn add @iconify/iconify
yarn add vite-plugin-purge-icons @iconify/json -D
配置
// vite.config.js
import PurgeIcons from 'vite-plugin-purge-icons'
export default {
plugins: [
PurgeIcons({
/* PurgeIcons Options */
})
]
}
main.js
import { createApp } from 'vue'
import App from './App.vue'
import '@purge-icons/generated' // <-- This
createApp(App).mount('#app')
搜索
安装好图标库和插件后,可以在此搜索:
N多图标随你用!
然后复制他给的span就行:
当然,我们使用Vue,肯定可以封装成组件:
<template>
<span :style="{ fontSize: size }">
<span class="iconify m-iconify" :data-icon="icon"></span>
</span>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Icon',
props: {
icon: { type: String, required: true },
size: { type: String, default: '18' },
},
setup() {
return {};
},
});
</script>
<style scoped lang="scss">
.m-iconify {
vertical-align: middle;
}
</style>
参考
purge-icons/packages/vite-plugin-purge-icons at main · antfu/purge-icons (github.com)
全文完 [
支付宝打赏
微信打赏
]
有帮助?打赏


非特殊说明,本博所有文章均为博主原创。如若转载,请注明出处:https://misiyu.cn/article/187.html
It's me
昵称:无道
坐标:成都
性别:
一个人,一介学生社会人,一个儿子~ 愿你我都被世界温暖以待
最新评论
点击排行
随机标签
213213123