plugins:[vue(),createSvgIconsPlugin({//svg配置// iconDirs: [path.resolve(process.cwd(),'src/assets/icons/svg')],//导入路径为'src/assets/icons'iconDirs:[fileURLToPath(newURL('src/assets/icons/svg',import.meta.url))],//导入路径为'src/assets/icons'symbolId:'icon-[dir]-[name]',//...
1.安装依赖:npm install vite-plugin-svg-icons -D 2.vite.config.ts 中配置: import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'//在export default ({ command, mode }: ConfigEnv): UserConfig中的plugins数组中添加代码plugins: [ createSvgIconsPlugin({//指定需要缓存的图标文件夹,地址可...
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]',/** * 自定义插入位置 ...
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...
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 ...
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-plugin-svg-icons":"^2.0.1" } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 配置文件 vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' ...
import{fileURLToPath,URL}from"node:url";import{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";//这里会报svgIcon.ts不在tsconfig.config.json文件列表中,在tsconfig.config.json的include里加//"./src/icons/svgIcon.ts"就行,不加对npm run dev没影响import{createSvg}from'./src/icons...
<template><slot/></template>.v-icon{display:inline-block;width:1em;height:1em;font-size:1em;}.v-icon>svg{width:100%;height:100%;} 使用unplugin-icons 作为图标按需加载 在目前的解决方案中,可能会使用unplugin-icons插件在SFC中静态按需加载图标。 importIconAccessibilityfrom'~icons/carbon/accessibil...
例如,“vite-plugin-vue”用于支持Vue框架,“vite-plugin-svg-icons”用于优化SVG图标的处理 (2)处理 CSS 使用sass :安装sass相关依赖后,通过“vite.config.js”中的css对象进行配置,指定预处理器选项。 引入全局 CSS :可以在配置中指定全局样式文件的路径,确保在项目的每个组件中都能应用。