将你的SVG图标文件放在一个合适的位置,比如src/assets/icons目录下。 3. 在Vue 3项目中导入SVG图标 你可以直接在Vue组件中导入SVG文件作为模块,这样它们就可以被当作React组件一样使用。Vite会处理这些文件的导入,并允许你在组件中直接使用它们。 例如,假设你有一个名为icon.svg的文件,你可以这样导入它: vue <...
首先我们需要初始化一个 Vite + Vue + TS 的项目,这里使用 pnpm 作为包管理工具,当然你也可以使用 npm 或者yarn。 pnpm create vite svg-example --template vue-tscdsvg-example pnpm install pnpm run dev 添加Svg 插件 创建项目后会有一个vue的图标,我们就使用这个图标来展示。 我们需要安装一个插件来处理 ...
这里使用yarn来安装vite-plugin-svg-icons插件 yarn add vite-plugin-svg-icons 文件配置 在vite.config.ts中进行文件配置,首先是引入插件,其次是在plugins中添加配置 iconDirs中存放的就是图标文件地址数组,这里的目录是 src/assets/icons // 引入svg需要用到的插件import{ createSvgIconsPlugin }from'vite-plugin-...
svg 可以当做 图标 导入react 里面 ,如果用img标签弄的话,无法控制 图标颜色 和字体 大小 ,但是把他当组件导入的话,就可以这么控制了,比较方便 ,并且也方便 webstorm 预览 首先 安装vite-plugin-svgr pnpm add vite-plugin-svgr -D 然后使用修改vite.config.js import{defineConfig}from'vite'importreactfrom'...
1. vite-plugin-svg-icons插件 本文的项目使用vue3+vite来构建,可以使用第三方的vite-plugin-svg-icons插件,来引入svg图标。 安装 安装vite-plugin-svg-icons插件 # npmnpm i vite-plugin-svg-icons -D# yarnyarn add vite-plugin-svg-icons -D# pnpmpnpm install vite-plugin-svg-icons -D ...
"vite": "^4.1.4", "vite-plugin-svg-icons": "^2.0.1" 件使用方式 安装插件 cnpm i vite-plugin-svg-icons -D 修改vite.config.js配置文件 import{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'// 配置全局加载svg图标为组件import{createSvgIcons...
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0"> ${res.join('')} </svg> ` ) } } } 2.配置vite.config.js import {defineConfig} from 'vite' ...
1、安装插件:vite-plugin-svg-icons // 通过命令安装2个插件npm i vite-plugin-svg-icons-D npm i fast-glob-D 如图所示: //package.json"devDependencies":{"@types/node":"^18.7.13","@vitejs/plugin-vue":"^3.0.3","fast-glob":"^3.2.12","sass":"^1.54.5","typescript":"^4.6.4","vit...
首先，初始化项目。使用
使用 vite.config.js中的配置插件 import{createSvgIconsPlugin}from'vite-plugin-svg-icons'importpathfrom'path'exportdefault()=>{return{plugins:[createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs:[path.resolve(process.cwd(),'src/icons')],// 指定symbolId格式symbolId:'icon-[dir]-[name]'...