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{...
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'; import path from 'path'; export default defineConfig({ plugins:...
vite-svg-loader 使用 <template><MyIcon/></template>importMyIconfrom'./my-icon.svg' vite-plugin-svg-icons 使用 首先创建目录src/assets/icons,将svg文件都保存到当前目录 接着创建一个公共组件ShIcon组件,放到components目录下 ShIcon.vue 内容为: <template><svgaria-hidden="true":style="{ width, he...
步骤如下：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 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加载组件时机的问题,而修改后的方法,使用了import.meta,global方法去预先取出所有符合条件的组件值,接着去调用并使用defineAsyncComponent来动态加载就可以了。 image.png 哦对,vite项目中使用动态加载svg记得引入vite-svg-loader插件,并在vite.config.js中进行配置: image.png...
│ ├── svg// 下存储svg文件│ │ └── analysis-icon.svg │ └── svgBuilder.js// vite 插件主要是为了loader svg svgBuilder.js 这个文件是从网上直接copy的,他们写是ts版本的,我这删掉类型声明那些东西,改成了js版本的 import{readFileSync,readdirSync}from"fs";letidPerfix="";constsvgTitle=...
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的模板文件) ...