vite-svg-loader插件加载SVG文件作为Vue组件,使用SVGO进行优化。 插件网站https://www.npmjs.com/package/vite-svg-loader 1. 安装 pnpm i vite-svg-loader-D 1. 2.vite.config.ts配置 // svg加载importsvgLoaderfrom'vite-svg-loader'// https://vitejs.dev/config/exportdefaultdefineConfig({// ...plu...
import{createApp}from"vue";importAppfrom"./App.vue";importsvgIconfrom'./icons/svgIcon.vue'createApp(App).component('svg-icon',svgIcon).mount("#app"); 6.在vite.config.ts中导入svgIcon.ts,在defineConfig()中加入createSvg(),如下所示 import{fileURLToPath,URL}from"node:url";import{...
引用:SVG 文件的引入方式之一:以 URL 的方式引入 SVG 文件,vue2、vue3+Vite vite-svg-loader-CSDN博客 https://blog.csdn.net/KimBing/article/details/135358798
步骤如下：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-svg-loader 使用 <template><MyIcon/></template>importMyIconfrom'./my-icon.svg' vite-plugin-svg-icons 使用 首先创建目录src/assets/icons,将svg文件都保存到当前目录 接着创建一个公共组件ShIcon组件,放到components目录下 ShIcon.vue 内容为: <...
安装svg 图片相关插件 安装依赖 npm i -D vite-svg-loader vite-plugin-svg-icons 1. 配置插件 // vite.config.ts import svgLoader from 'vite-svg-loader' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; import svgLoader from 'vite-svg-loader'; ...
首先要做一个vite plugin,作为一个loader加载.svg 文件,读取 svg 文件的内容,类似raw-loader。 然后需要一个 component,它去动态加载 svg 文件,并把 svg 文件的内容拼接到雪碧图里。 代码 vite.config.ts中这样写: import {defineConfig, Plugin} from 'vite' ...
npm i vite-plugin-svg-icons -D 2. 新建文件夹 src/assets/icons/svg来存放svg 图片 3.新建组件src/components/SvgIcon/index.vue <template><svg:style="{width, height}"><use:xlink:href="prefix + name":fill="color"></use></svg></template>defineProps({ //前缀 prefix: { type...
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
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的模板文件) ...