import'virtual:svg-icons-register' 使用 新建一个svg-icon组件,按照自己喜欢的方式全局引入或局部引入,内容如下: <template><svgclass="svg-icon"aria-hidden="true"v-on="$listeners"><use:href="symbolId":fill="color"/></svg></template>export default { name: 'SvgIcon', props: { prefix: { t...
一、安装 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...
您可以检查 Webpack 配置文件中是否包含 SVG 文件的 loader,并确保其正确配置。您可以参考 Webpack 的官方文档以了解如何正确配置 SVG loader。 浏览器兼容性问题:一些旧版本的浏览器可能不支持 SVG 图标的渲染。您需要检查您的 SVG 文件是否符合 SVG 标准,并且在需要支持旧版浏览器的情况下,提供相应的兼容性处理。
vite-plugin-svg-icons version: ^0.5.0 main.js // svg import 'vite-plugin-svg-icons/register'; vite.config.js plugins: [ createVuePlugin({ jsx: true }), viteSvgIcons({ iconDirs: [path.resolve(process.cwd(), 'src/assets/editor-svg')], symb...
在webpack 中加载 svg 资源可以使用 svg-sprite-loader,而 vite 中可以使用插件 vite-plugin-svg-icons。 3.1 安装开发依赖 首先安装 vite-plugin-svg-icons 为开发依赖: yarn add vite-plugin-svg-icons -D 3.2 配置 vite 在vite.config.ts 中配置该插件: ... import { createSvgIconsPlugin } from 'vi...
"unplugin-auto-import":"0.8.5", "vite":"2.9.9", "vite-plugin-compression":"0.5.1", "vite-plugin-svg-icons":"1.0.5", "vite-plugin-svg-icons":"2.0.1", "vite-plugin-vue-setup-extend":"0.4.0" } } 4 changes: 2 additions & 2 deletions4vite/plugins/svg-icon.js ...
createSvgIconsPlugin({ // 新建 assets/svg文件夹,将svg放入文件夹下 iconDirs: [resolve('src/assets/svg')],//定义每个 SVG 图标的符号 ID symbolId:"icon-[name]"}), ], }) 定义一个svgicon组件,新建SvgIcon.vue const props=defineProps({//SVG 文件名称 name:{ type:String...
import "virtual:svg-icons-register"; // vite-plugin-svg-icons 插件注册,不引入会导致svg图标无法正常显示 5. 封装 SvgIcon 组件可根据自己实际项目需要自行修改组件逻辑<template> <svg :style="iconStyle" aria-hidden="true"> <use :xlink:href="symbolId" /> </svg> ...
是这样的,我想自己弄一个组件库,用的是 vue3 + ts + vite其中有一个组件就是 Icon,所以想着自己用 svg 去画一些 Icon,这里使用了 vite-plugin-svg-icons ,现在已经可以在本地开发环境中(npm run dev)成功运...