一、安装 vite-plugin-svg-icons npm i vite-plugin-svg-icons -D // 或者 yarn add vite-plugin-svg-icons -D 二、在main.js引入 import 'virtual:svg-icons-register' 三、配置SVG图片文件夹 四、在vite.config.js中配置 //import path,{ resolve } from 'path' import path from 'path' import {c...
npm install vite-plugin-svg-icons --save-dev 配置 在安装了 vite-plugin-svg-icons 插件后,我们可以在 vite.config.js 中进行配置。以下是一个示例配置: import{defineConfig}from'vite'importsvgIconsfrom'vite-plugin-svg-icons'exportdefaultdefineConfig({plugins:[svgIcons({// 指定要处理的 SVG 文件夹路...
-- 会替换成 :icon="defineAsyncComponent(() => import('~icons/mdi/account'))" 即 mdi 库的 account 图标组件 --> <v-icon icon="mdi-account" /> <!-- 会替换成 :icon="defineAsyncComponent(() => import('~icons/dashboard'))" 即本地 src/icons/dashboard.svg 图标组件 --> <v-icon...
// src/icons/dashboard.svg<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svgclass="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://...
vite-plugin-svg-icons 用于生成 svg 雪碧图。 特点: 1.预加载 在项目运行时就生成所有图标,只需操作一次 dom 2.高性能 内置缓存,仅当文件被修改时才会重新生成vite-plugin-svg-icons 官方文档pnpm add vite-plugin-svg-icons 2. 安装 fast-glob该软件包提供了遍历文件系统的方法,并根据Unix Bash shell使用的...
vite-plugin-iconify GitHub 按需导入图标作为组件。 在 unplugin-icons 的基础上支持导入并优化 svg 文件(目录),组件属性静态替换成图标组件,更方便其它 UI 框架接入图标系统。 特性 🤹 任意图标集 - 超过 10,00...
总结: vite-plugin-svg-icons是基于Vite的插件,通过使用SVG sprite技术,将SVG图标转换为Vue组件并自动导入。它的原理是将多个SVG图标合并到一个SVG sprite文件中,并生成一个包含所有SVG图标信息的JavaScript模块。通过导入这个模块,开发者可以方便地使用SVG图标,并实现按需加载,提高应用的性能和效率。©...
通过createSvgIconsPlugin() 入参指定了svg 文件所在的目录和 symbolId。 3.3 修改 main.ts 在main.ts 中添加如下语句: import 'virtual:svg-icons-register' 3.4 完成 svg-icon 组件 通过上述步骤,便完成了 vite-plugin-svg-icons 的配置,接下来实现 svg-icon 组件即可。前面已经完成了在线 svg、样式等,现在...
pnpm install vite-plugin-svg-icons-D 在vite.config.ts 中配置插件 代码语言:javascript 复制 import{defineConfig}from'vite'import{createSvgIconsPlugin}from'vite-plugin-svg-icons'// 引入 svg 图标所需要的插件importvuefrom'@vitejs/plugin-vue'importpathfrom'path'// https://vitejs.dev/config/export...
@vitejs/plugin-vue:Vue.js 支持插件@vitejs/plugin-react-refresh:React 支持插件,提供 Fast Refresh 功能vite-plugin-svelte:Svelte 支持插件vite-plugin-windicss:用于支持 Windi CSS 的插件vite-plugin-svg-icons:用于按需引入 SVG 图标的插件 要使用 Vite 插件,只需将插件导入配置文件并添加到 plugins ...