前言
需要使用到antfu大佬开发的vite插件
iconify Iconify是功能最丰富的图标框架。 可以与任何图标库一起使用的统一图标框架。 开箱即用的功能包括80多个图标集和超过70,000个图标
有了iconify，基本上也不选哟iconfont了，因为其实如果你用过iconfont，会发现很多图标其实大小这些不配套，需要修改。
下载
代码语言：javascript复制yarn add @iconify/iconify
yarn add vite-plugin-purge-icons @iconify/json -D配置
代码语言：javascript复制// 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')搜索
安装好图标库和插件后，可以在此搜索：
Icon Sets • Iconify
N多图标随你用！
然后复制他给的span就行：
当然，我们使用Vue，肯定可以封装成组件：
代码语言：javascript复制<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)
