import vueJsx from '@vitejs/plugin-vue-jsx' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import AutoImport from "unplugin-auto-import/vite" import Components from "unplugin-vue-components/vite" import { ElementPlusResolver } from "unplugin-vue-components/resolvers" // import...
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...
1.安装vite-plugin-svg-icons npm i vite-plugin-svg-icons -D 2. 新建文件夹 src/assets/icons/svg来存放svg 图片 3.新建组件src/components/SvgIcon/index.vue <template><svg:style="{width, height}"><use:xlink:href="prefix + name":fill="color"></use></svg></template>defineProps({ //前...
import{createSvgIconsPlugin}from 'vite-plugin-svg-icons'importpathfrom'path'exportdefaultfunctioncreateSvgIcon(){returncreateSvgIconsPlugin({iconDirs:[path.resolve(process.cwd(),'src/assets/icons/svg')],symbolId:'icon-[dir]-[name]',})} 1. 2. 3. 4. 5. 6. 7. 8. 9. src/componments...
<SvgIcon name="AI" /> </> }; 可以看到,我们在渲染对应的svg的时候,只需要提供一个唯一ID即可(这里做一下剧透,其实就是svg的文件名称) 那么,我们如何才能让我们的项目如此丝滑的使用这种特性呢。再这里,我们选择了写一个vite-plugin来解决这个问题。当然,也可以写Webpack-plugin,虽然他们插件机制不同,但是...
createSvgIconsPlugin({//指定需要缓存的图标文件夹,地址可改iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],//指定symbolId格式symbolId: 'icon-[dir]-[name]', }) ], 3.main.ts中添加代码: import 'virtual:svg-icons-register' ...
vite-plugin-svg-icons 用于生成 svg 雪碧图。 特点: 1.预加载 在项目运行时就生成所有图标,只需操作一次 dom 2.高性能 内置缓存,仅当文件被修改时才会重新生成vite-plugin-svg-icons 官方文档pnpm add vite-plugin-svg-icons 2. 安装 fast-glob该软件包提供了遍历文件系统的方法,并根据Unix Bash shell使用的...
{ plugins: [ vue(), // 使用svg-icon createSvgIconsPlugin({ // 指定需要缓存的图标文件夹 iconDirs: [path.resolve(process.cwd(), 'src/assets/svg/icons')], // 指定symbolId格式 symbolId: 'icon-[name]', }), ], resolve: { alias: { '@': path.resolve(__dirname, './src') } }...
在vite.config.js中配置vite-plugin-svg-icons // 其他引入importpathfrom"path";import{createSvgIconsPlugin}from"vite-plugin-svg-icons";exportdefaultdefineConfig({// 其他配置plugins:[createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs:[// 这里分为了一般icon文件夹和文件图标类型文件夹,方便管理...
修改vite.config.js配置文件 import{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'// 配置全局加载svg图标为组件import{createSvgIconsPlugin}from'vite-plugin-svg-icons';importpathfrom'path';// https://vitejs.dev/config/exportdefaultdefineConfig({plugi...