首先，确保你的项目已经使用 Vite 搭建，并且成功集成了 Vue 3。接下来，让我们为项目增添一抹亮色，安装 vite-plugin-svg-icons。这款插件专为加载和处理 SVG 图标而生，简直是你在 SVG 世界中的得力助手，能轻松搞定所有相关事务。只需在终端中运行以下命令：或者，如果你习惯使用 npm：完成安装后，你的项目将...
2. 准备SVG图标文件 将你的SVG图标文件放在一个合适的位置,比如src/assets/icons目录下。 3. 在Vue 3项目中导入SVG图标 你可以直接在Vue组件中导入SVG文件作为模块,这样它们就可以被当作React组件一样使用。Vite会处理这些文件的导入,并允许你在组件中直接使用它们。 例如,假设你有一个名为icon.svg的文件,你可以...
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.conf...
💾 本地 SVG 图标 1️⃣ 安装开发依赖 2️⃣ 配置 Vite 3️⃣ 修改 main.ts 4️⃣ 完成 svg-icon 组件 5️⃣ 测试本地图标🔧 配置步骤 创建组件:定义组件的输入属性和样式。 在线图标:判断图标是否在线,并创建相应的模板和样式。 本地图标:安装开发依赖,配置 Vite,修改 main.ts,完成 ...
1.选择图标,点击下载按钮 2.选择颜色和尺寸之后,点击下载 SVG 格式 3.添加到购物车,批量下载 我们也可以将要下载的图标添加到购物车,然后批量下载 下载之后,接下来我们需要 在 vue 项目中引入这些图标。 5. Vue3 引入 SVG 图标 ★ 前提:使用 Vite 脚手架开发 Vue3 项目。
//图标前缀,默认icon prefix:{ type:String, default:'icon' }, //图标名称 name:{ type:String, default:"" } }); // 注意: symbolId 的值需要与 vite.config.ts中配置的 symbolId 保持一致。 最终symbolId的值格式为#icon-svgName。 const symbolId = computed(()=>`#${props.prefix}-${props....
使用 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]'...
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、安装插件: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...
1. 使用方式 页面中直接写标签,myicon是svg图片文件名,不需要引入。myicon文件放在指定的svg目录中即可。 <svg-icon icon-class="myicon" 2. 实现方式 (1)新建vite文件夹,建一个plugins文件夹,新建一个svg-icon.js文件,内容如下 // 用到插件 "vite-plugin-svg-icons": "2.0.1" 自行下载依赖 ...