本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

上一章讲解静态图标库Iconify在开发中能大大提升开发效率。本章讲解Iconify的动态使用方法。动态图标使用场景最常见的就是动态路由。数据中会包含图标的名称例如：meta: { title: '首页', icon: 'ri:home-2-line' }通过'ri:home-2-line'渲染图标

推荐阅读

• vite.config.ts 之 Plugins 篇 (六)

vite.config.ts 之 Plugins 篇 (七)

vite-plugin-purge-icons

• 安装

# 选择一个你喜欢的包管理器

# NPM
npm install @iconify/iconify @iconify/json vite-plugin-purge-icons -D

# Yarn
yarn add @iconify/iconify @iconify/json vite-plugin-purge-icons -D

# PNPM
pnpm install @iconify/iconify @iconify/json vite-plugin-purge-icons -D

• 配置

// unplugin.ts
import PurgeIcons from 'vite-plugin-purge-icons'
...省略插件配置
export function configVuePurgeIconsPlugin() {
  return PurgeIcons({
    /* PurgeIcons Options */
    // globs for searching source file to analyze
    content: ['**/*.vue'], // scan for .vue file as well
    format: 'mjs',
  })
}

将动态图标配置configVuePurgeIconsPlugin添加plugins中

import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import legacy from '@vitejs/plugin-legacy'
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'
import { configCompressPlugin } from './compress'
import { configImageminPlugin } from './imagemin'
import { configStyleImportPlugin } from './style'
import {
  configAutoImportPlugin,
  configVueComponentsPlugin,
  configVueIconsPlugin,
  configVuePurgeIconsPlugin,
} from './unplugin'
export function createVitePlugins(isBuild: boolean) {
  const plugins = [
    vue(),
    vueSetupExtend(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    }),
    PkgConfig(),
    OptimizationPersist(),
  ]
  ...省略插件配置
  // unplugin-icons
  plugins.push(configVueIconsPlugin())
  // vite-plugin-purge-icons
  plugins.push(configVuePurgeIconsPlugin())
  return plugins
}

使用动态图标@purge-icons/generated必须要引入

// main.ts
import 'vue-global-api'
import '@purge-icons/generated'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

• 使用

class="iconify"一点要添加不然图标无法显示data-icon指定显示的图标

// App.vue
<script setup lang="ts" name="App">
</script>

<template>
  <!-- assets/icons/vuejs-fill.svg -->
  <icon-custom-vuejs-fill />
  <!-- https://icones.js.org/collection/ri -->
  <icon-ri-e-bike-2-fill />
  <!-- 动态图标使用方法 -->
  <span class="iconify" data-icon="ri:translate" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行

npm run dev 

打包

npm run build 

{
  "name": "admin-vite",
  "private": true,
  "version": "0.0.7",
  "author": {
    "name": "SunHongYu",
    "email": "17600616235@163.com",
    "url": "https://juejin.cn/"
  },
  "resolutions": {
    "bin-wrapper": "npm:bin-wrapper-china"
  },
  "scripts": {
    "bootstrap": "pnpm install",
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "npm run build && vite preview",
    "preview:dist": "vite preview",
    "clean": "rimraf node_modules",
    "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite"
  },
  "dependencies": {
    "element-plus": "^2.0.2",
    "vue": "^3.2.31"
  },
  "devDependencies": {
    "@iconify-json/ri": "^1.1.0",
    "@iconify/iconify": "^2.1.2",
    "@iconify/json": "^2.1.6",
    "@vitejs/plugin-legacy": "^1.7.1",
    "@vitejs/plugin-vue": "^2.2.0",
    "@vue/compiler-sfc": "^3.2.31",
    "consola": "^2.15.3",
    "typescript": "^4.5.5",
    "unplugin-auto-import": "^0.6.1",
    "unplugin-icons": "^0.13.2",
    "unplugin-vue-components": "^0.17.21",
    "vite": "^2.8.2",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-imagemin": "^0.6.1",
    "vite-plugin-optimize-persist": "^0.1.2",
    "vite-plugin-package-config": "^0.1.1",
    "vite-plugin-purge-icons": "^0.7.0",
    "vite-plugin-style-import": "^2.0.0",
    "vite-plugin-vue-setup-extend": "^0.4.0",
    "vue-global-api": "^0.4.1",
    "vue-tsc": "^0.31.2"
  },
  "vite": {
    "optimizeDeps": {
      "include": [
        "@iconify/iconify",
        "element-plus/es",
        "element-plus/es/components/button/style/css",
        "element-plus/es/components/link/style/css",
        "vue",
        "vue-global-api"
      ]
    }
  }
}

代码已经提交到Gitee

继续学习

废话只说一句：码字不易求个👍，收藏 === 学会,快行动起来吧！🙇‍🙇‍🙇‍。

# Vite+Vue3+TypeScript+Element (八) 搭建企业级轻量框架实践