vite-plugin-iconify-to-svg

用于把 @iconify/json 中的图标转化成本地 svg 图片的 vite 插件。

安装

pnpm i vite-plugin-iconify-to-svg -D

使用

import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import {iconifyToSvg} from 'vite-plugin-iconify-to-svg'


export default defineConfig({
    plugins: [
        vue(),
        vueJsx(),
        vueDevTools(),
        iconifyToSvg()
        /** 默认值如下
         * @param {string[]} iconSet  @iconify/json 中可用的图标集名称
         * @param {string} assetsDir svg 目录
         */
        // iconifyToSvg({
        //     iconSet: ['ep'],
        //     'src/assets/svg'
        // })
    ]
})

说明

在使用 iconify 图标时，配置好了 unplugin-icons 的自动导入，但它只能实现从前端来写图标，无法实现从后端获取字符串来渲染离线图标。因为 vite-plugin-svg-icons 的图标配置方案不好用，vite-svg-loader 能使 svg 图标像组件一样使用。所以可以做图标组件和字符串的映射，来实现 iconify 的离线打包功能。

本插件就是为了以上目的将 @iconify/json 里存在的资源转成本地 svg 图片的。

修复

import json 文件时会有一个 assert 和 with 的区别，导致插件无法正常运行。最后只好限制 node 版本（>= 22.0.0）了，加动态导入绕过 rollup 打包的默认生成的 assert 了。

const foo = new Function('a','b','return a+b')