2021-08-30 vite使用iconify，图标任你用！

前言

需要使用到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')

搜索

安装好图标库和插件后，可以在此搜索：

Icon Sets • Iconify

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)