在以往的习惯用法中,我们通常喜欢下载svg文件到某个目录作为自定义图标载入,vite-plugin-iconify也支持了,默认会载入src/icons目录中.svg后缀的文件,通过~icons导入组件集。 那如何将自定义图标结合v-icon使用呢,新增文件如下: // src/icons/dashboard.svg<?xml version="1.0" standalone="no"?><!DOCTYPE svg ...
一、安装 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...
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-purge-icons 是一个 Vite 插件,用于按需加载 SVG 图标。类似于 TailwindCSS + PurgeCSS,但作用于图标。它会分析你的源代码或打包后的文件,提取出你使用的图标名称,然后将这些需要的图标数据(SVG)打包到你的代码中,减少了不必要的带宽和额外的未使用的图标,从而优化了加载性能。 该插件通过加入 Purge...
import ViteRestart from 'vite-plugin-restart' export default { plugins: [ ViteRestart({ restart: [ 'vite.config.js', ] }) ], }; unplugin-vue-components 组件自动按需导入 安装: npm i unplugin-vue-components -D 配置:vite.config.js ...
vite-plugin-svg-icons 是一个用于将本地 SVG 文件转换为可直接在 Vue 组件中使用的图标的 Vite 插件。以下是使用 vite-plugin-svg-icons 的详细步骤: 1. 安装 vite-plugin-svg-icons 插件 首先,你需要在项目中安装 vite-plugin-svg-icons 插件。可以使用 npm 或 yarn 进行安装: bash npm install vite-plug...
<v-icon:icon="import('~icons/mdi/close')"/> 加载自定义图标 默认自动加载src/icons目录下的所有svg结尾的文件,使用~icons加载。 import{createApp}from'vue'importAppfrom'./App.vue'importiconsfrom'~icons'constapp=createApp(App)for(constnameinicons){app.component(`icon-${name}`,icons[name])}ap...
vite-plugin-import-icons 用于引入 SVG 图标的 Vite 插件,支持自动引入和热更新。 安装 pnpm add vite-plugin-import-icons -D 配置 // vite.config.tsimportImportIconsfrom'vite-plugin-import-icons'exportdefaultdefineConfig({plugins:[ImportIcons({/* options */}),],}); ...
vite-plugin-svg-icons 预加载在项目运行时就生成所有图标,只需操作一次 dom 高性能内置缓存,仅当文件被修改时才会重新生成 安装 node version:>=12.0.0vite version:>=2.0.0 yarn add vite-plugin-svg-icons-D# or npm i vite-plugin-svg-icons-D# or ...
我们可以使用以下命令来安装 vite-plugin-svg-icons 插件: npm install vite-plugin-svg-icons --save-dev 配置 在安装了 vite-plugin-svg-icons 插件后,我们可以在 vite.config.js 中进行配置。以下是一个示例配置: import{defineConfig}from'vite'importsvgIconsfrom'vite-plugin-svg-icons'exportdefaultdefineCon...