6.在vite.config.ts中导入svgIcon.ts,在defineConfig()中加入createSvg(),如下所示 import{fileURLToPath,URL}from"node:url";import{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";//这里会报svgIcon.ts不在tsconfig.config.json文件列表中,在tsconfig.config.json的include里加//"./src/ic...
步骤如下：1. 安装svg-sprite-loader，版本为6.0.11。npm install svg-sprite-loader 2. 将svg图片存放在src/icons/svg目录下，在此处创建两个文件：svgIcon.ts和svgIcon.vue（创建位置和文件名无特殊要求）。3. 在svgIcon.ts中加入以下代码（如果出现fs模块找不到的错误，请参考文章末尾附录-导入...
首先要做一个vite plugin,作为一个loader加载.svg 文件,读取 svg 文件的内容,类似raw-loader。 然后需要一个 component,它去动态加载 svg 文件,并把 svg 文件的内容拼接到雪碧图里。 代码 vite.config.ts中这样写: import {defineConfig, Plugin} from 'vite' import vue from '@vitejs/plugin-vue' import ...
import App from './App.vue' import svgIcon from './components/svgIcon.vue' createApp(App).component('svg-icon', svgIcon).mount('#app'); stept6: 在plugins文件夹创建svgBuilder.js(重点来了),ts版本参考:https://github.com/JetBrains/svg-sprite-loader/issues/434 import { readFileSync, read...
1. 首先引入svg插件 yarn add svg-sprite-loader -D // 或者 npm install svg-sprite-loader -D 2. 创建文件 在@/src里面创建icons文件夹,里面创建index.vue(svgicon的模板文件),index.ts(svgicon的js逻辑),svg文件夹(svg图标存放的地址) index.vue(svgicon的模板文件) ...
大家在使用Vue-Cli的时候,想要使用SVG,svg-sprite-loader绝对是个火热的插件,它用相对优雅的方式帮我们解决了引入 SVG 文件的问题。 到了Vite上,由于不再使用webpack进行打包,svg-sprite-loader不再可用,svg的插件又回到了百花齐放的阶段,其中最火的vite-sprite-loader,但是他不支持 Sprite 技术(这里要提一下,关于...
electron+vue3+vite+ts项目中使用svg图标 项目结构 1. 首先引入svg插件 1 2 3 yarn add svg-sprite-loader -D // 或者 npm install svg-sprite-loader -D 2. 创建文件 1、创建icons文件夹,里面创建index.ts(svgicon的js逻辑),svg文件夹(svg图标存放的地址)...
electron+vue3+vite+ts项目中使用svg图标,项目结构1.首先引入svg插件yarnaddsvg-sprite-loader-D//或者npminstallsvg-sprite-loader-D2.创建文件1、创建icons文件夹,里面创建 index.ts(svgicon的js逻辑),svg文件夹(svg图标存...
简介:vue3+vite+ts项目中使用svg图标 项目结构 网络异常,图片无法展示 | 1. 首先引入svg插件 yarn add svg-sprite-loader -D// 或者npm install svg-sprite-loader -D复制代码 网络异常,图片无法展示 | 2. 创建文件 在@/src里面创建icons文件夹,里面创建index.vue(svgicon的模板文件),index.ts(svgicon的js...
npm install svg-sprite-loader-D# via yarnyarnaddsvg-sprite-loader-D stept3: 创建svgIcon.vue文件 <template><svg:class="svgClass"v-bind="$attrs":style="{color: color}"><use:xlink:href="iconName"/></svg></template>import { defineProps, computed } from "vue"; const props = define...