import svgIcons from 'vite-plugin-svg-icons'; export default { plugins: [ svgIcons({ // 配置选项 }), ], }; 在您的项目中创建一个 SVG 文件夹,并将所有的 SVG 图标文件放在该文件夹内。 在您的组件或页面中,使用以下方式导入 SVG 图标: ...
在vite.config.js中配置vite-plugin-svg-icons // 其他引入importpathfrom"path";import{createSvgIconsPlugin}from"vite-plugin-svg-icons";exportdefaultdefineConfig({// 其他配置plugins:[createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs:[// 这里分为了一般icon文件夹和文件图标类型文件夹,方便管理,...
一、安装 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...
//插件引入import{createSvgIconsPlugin}from'vite-plugin-svg-icons'importpathfrom'path'plugins:[vue(),Components({// UI库resolvers:[ArcoResolver()],}),createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs:[path.resolve(process.cwd(),"src/assets/icons")],// 指定symbolId格式symbolId:"icon...
根据文件目录导入自定义图标 在以往的习惯用法中,我们通常喜欢下载svg文件到某个目录作为自定义图标载入,vite-plugin-iconify也支持了,默认会载入src/icons目录中.svg后缀的文件,通过~icons导入组件集。 那如何将自定义图标结合v-icon使用呢,新增文件如下:
.v-icon > svg { width: 100%; height: 100%; } 使用unplugin-icons 作为图标按需加载 在目前的解决方案中,可能会使用unplugin-icons插件在SFC中静态按需加载图标。 import IconAccessibility from '~icons/carbon/accessibility' <template> <v-icon> ...
除了vite-plugin-svg-icons 之外,还可以使用若干种打包方案来将 SVG 图标打包,如 vue-svg-loader、svg-sprite-loader 等。而使用 vite-plugin-svg-icons 打包 SVG 图标需要在 vite.config.js 中添加相应的配置,如下所示: import { defineConfig } from 'vite' import svgLoader from 'vite-svg-loader' import...
是这样的,我想自己弄一个组件库,用的是 vue3 + ts + vite其中有一个组件就是 Icon,所以想着自己用 svg 去画一些 Icon,这里使用了 vite-plugin-svg-icons ,现在已经可以在本地开发环境中(npm run dev)成功运行了。下面是关于 Icon 的目录结构 但是当我打包上传到 npm 之后,在新项目中(vite-press)使用时...
yarn add vite-plugin-svg-icons-Dyarn add fast-glob-D 1. 2. 在vite.config.js文件中配置插件 把配置插件中 //plugins: [vue(), ] plugins: createVitePlugins(), 完整内容 import{defineConfig,loadEnv}from"vite";importpathfrom"path";importvuefrom '@vitejs/plugin-vue';importcreateVitePluginsfrom...
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 ...