vite-plugin-svg-icons的取代方案

为什么使用@unocss/preset-icons

在使用vite-plugin-svg-icons时，项目显示不出svg。具体原因不清楚。

@unocss/preset-icons官网

官方文档

一、下载依赖

npm i  unocss @iconify/utils -D

二、新建uno.config.ts

注意文件中的iconsDir，是你存放svg的文件夹地址

import { defineConfig } from "unocss";
import presetIcons from "@unocss/preset-icons";
import { FileSystemIconLoader } from "@iconify/utils/lib/loader/node-loaders";
import fs from "fs";

// 本地 SVG 图标存放目录
const iconsDir = "./src/assets/icons";

// 读取本地 SVG 目录，自动生成 `safelist`
const generateSafeList = () => {
  try {
    return fs
      .readdirSync(iconsDir)
      .filter((file) => file.endsWith(".svg"))
      .map((file) => `i-svg:${file.replace(".svg", "")}`);
  } catch (error) {
    console.error("无法读取图标目录:", error);
    return [];
  }
};

export default defineConfig({
  presets: [
    presetIcons({
      // 设置全局图标默认属性
      extraProperties: {
        width: "1em",
        height: "1em",
        display: "inline-block",
      },
      // 注册本地 SVG 图标集合
      collections: {
        // svg 是图标集合名称，使用 `i-svg:图标名` 调用
        svg: FileSystemIconLoader(iconsDir, (svg) => {
          // 如果 SVG 文件未定义 `fill` 属性，则默认填充 `currentColor`
          // 这样图标颜色会继承文本颜色，方便在不同场景下适配
          return svg.includes('fill="currentColor"')
            ? svg
            : svg.replace(/^<svg /, '<svg fill="currentColor" ');
        }),
      },
    }),
  ],
  safelist: generateSafeList(), // 动态生成 `safelist`
});

三、修改vite.config.js，导入unocss插件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// 导入Unocss插件
import Unocss from "unocss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    // @ts-ignore
    vue(),
    Unocss(),
  ],
  resolve: {
    alias: {
      "@": path.resolve("./src"),
    },
  },
});

四、修改main.ts文件

import { createApp } from "vue";
import ElementPlus from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";

import "element-plus/dist/index.css";

import App from "@/App.vue";

const app = createApp(App);

app.use(ElementPlus, {
  locale: zhCn,
});

import "virtual:uno.css"; //添加这个

app.mount("#app");

五、使用

<script setup lang="ts">
</script>

<template>
  <div class="i-svg:left_line size"></div>
</template>

<style scoped>
.size {
  height: 200px;
  width: 200px;
  color: red;
}
</style>

可直接使用 i-svg:图标名称 调用。

参考文档：告别 vite-plugin-svg-icons！使用 @unocss/preset-icons 实现 SVG 本地加载