您可以检查 Webpack 配置文件中是否包含 SVG 文件的 loader,并确保其正确配置。您可以参考 Webpack 的官方文档以了解如何正确配置 SVG loader。 浏览器兼容性问题:一些旧版本的浏览器可能不支持 SVG 图标的渲染。您需要检查您的 SVG 文件是否符合 SVG 标准,并且在需要支持旧版浏览器的情况下,提供相应的兼容性处理。
一、安装 vite-plugin-svg-icons npm i vite-plugin-svg-icons -D // 或者 yarn add vite-plugin-svg-icons -D 二、在main.js引入 import 'virtual:svg-icons-register' 三、配置SVG图片文件夹 四、在vite.config.js中配置 //import path,{ resolve } from 'path' import path from 'path' import {c...
在安装了 vite-plugin-svg-icons 插件后,我们可以在 vite.config.js 中进行配置。以下是一个示例配置: import { defineConfig } from 'vite' import svgIcons from 'vite-plugin-svg-icons' export default defineConfig({ plugins: [ svgIcons({ // 指定要处理的 SVG 文件夹路径 iconDirs: [require.resolve...
//插件引入 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import path from 'path' plugins: [ vue(), Components({ // UI库 resolvers: [ArcoResolver()], }), createSvgIconsPlugin({ // 指定需要缓存的图标文件夹 iconDirs: [path.resolve(process.cwd(), "src/assets/icons")]...
npm install vite-plugin-svg-icons --save npm install fast-glob --save 在vite.config.js配置 import{ defineConfig }from'vite'importvuefrom'@vitejs/plugin-vue'import{createSvgIconsPlugin}from'vite-plugin-svg-icons';importpathfrom'path'function resolve(dir) {returnpath.join(__dirname, dir) ...
"vite-plugin-vue-setup-extend":"0.4.0" } } 4 changes: 2 additions & 2 deletions4vite/plugins/svg-icon.js Original file line numberDiff line numberDiff line change @@ -1,8 +1,8 @@ importsvgIconfrom'vite-plugin-svg-icons' import{createSvgIconsPlugin}from'vite-plugin-svg-icons' ...
vite-plugin-svg-icons 用于生成 svg 雪碧图。 特点: 1.预加载 在项目运行时就生成所有图标,只需操作一次 dom 2.高性能 内置缓存,仅当文件被修改时才会重新生成vite-plugin-svg-icons 官方文档pnpm add vite-plugin-svg-icons 2. 安装 fast-glob该软件包提供了遍历文件系统的方法,并根据Unix Bash shell使用的...
plugin-svg-icons/tree/master/#readme", "devDependencies": { "@commitlint/cli": "^16.1.0", "@commitlint/config-conventional": "^16.0.0", "@types/html-minifier-terser": "^6.1.0", "@types/jsdom": "^16.2.14", "@types/node": "^17.0.13", "@typescript-eslint/eslint-plugin": "...
通过createSvgIconsPlugin() 入参指定了svg 文件所在的目录和 symbolId。 3.3 修改 main.ts 在main.ts 中添加如下语句: import 'virtual:svg-icons-register' 3.4 完成 svg-icon 组件 通过上述步骤,便完成了 vite-plugin-svg-icons 的配置,接下来实现 svg-icon 组件即可。前面已经完成了在线 svg、样式等,现在...