基于iconify开发vite插件，打包本地文件夹中的svg图标离线使用，iconify动态渲染图标

原创

已于 2023-09-04 21:51:44 修改 · 2.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #elementui #vue

于 2023-06-27 14:23:05 首次发布

文章介绍了如何基于iconify创建一个Vite插件，用于打包本地SVG图标和iconify的离线图标库。通过这个插件，可以实现动态渲染SVG图标，并在main.js中导入使用。配置主要在vite.config.ts中进行，包括设置自定义SVG图标目录、图标前缀以及iconify的图标集合。

背景

在项目中使用svg图标是一个非常常见的需求，目前常用的方案有iconfont矢量图标库提供的方案，基于svg-sprite-loader插件处理的方案，但是这些方案会生成大量的dom节点，性能底。因此iconify会是更好的选择，想要基于iconify使用v-for的方式动态渲染图标必须要本地打包图标。

iconify 官网

入口

使用方式

iconify有多种使用方式，结合iconify提供的 Icon 组件可完成动态渲染功能。

  <!-- 使用方式 {前缀}-{图标集合}-{图标名} -->
  <i-ep-edit />
  <i-mdi-account-box style="font-size: 2em; color: red"/>
  <!-- 结合element plus -->
  <el-icon><i-ep-menu /></el-icon>
  <Icon icon="ep:menu" />

渲染动态图标

 <!-- custom:${item.icon} => custom 是本地图标的自定义前缀，在vite.config中配置 -->
   // import {Icon} from 'iconify/vue'
    <el-icon>
    	 <Icon :icon="`custom:${item.icon}`" width="28" height="28" />
    </el-icon>

使用iconify打包离线图标库和本地的svg图标

效果

在main.js中导入

import "virtual:customIcon";

在这里插入图片描述

vite.config.ts配置

import ViteIconifyBundle from './plugins/vite-iconify-bundle'
import path from 'node:path'

export default defineConfig({
   
   
	plugins: [
		ViteIconifyBundle({
   
   
      // 打包自定义svg图标
      svg: [
        {
   
   
          dir: path.resolve(__dirname, './src/assets/svg'),
          monotone: false,
          prefix: 'custom', // 自定义本地图标前缀
        },
      ],

      // 从 iconify 打包 icon 集合
       icons: [
         "mdi:home",
         "mdi:account",
         "mdi:login",
         "mdi:logout",
         "octicon:book-24",
         "octicon:code-square-24"
       ]

      // 自定义 JSON 文件
       json: [
         // Custom JSON file
         // 'json/gg.json',
         // Iconify JSON file (@iconify/json is a package name, /json/ is directory where files are, then filename)
         require.resolve('@iconify/json/json/tabler.json'),
         // Custom file with only few icons
         {
   
   
           filename: require.resolve('@iconify/json/json/line-md.json'),
           icons: ['home-twotone-alt', 'github', 'document-list', 'document-code'

最低0.47元/天解锁文章