SVG 图标资源中的样式通常使用 class 属性指定。 如果以上配置项都已经正确配置,但仍然无法在开发环境中看到 SVG 图标,请检查您的 SVG 图标资源是否符合规范,并且在打包部署之前是否已经成功渲染。您可以在 SVG 图标资源中添加 <svg> 标签,并在 <svg> 标签中使用 <use> 标签引用图标符号。如果您使用的是 <use ...
//插件引入 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import path from 'path' plugins: [ vue(), Components({ // UI库 resolvers: [ArcoResolver()], }), createSvgIconsPlugin({ // 指定需要缓存的图标文件夹 iconDirs: [path.resolve(process.cwd(), "src/assets/icons")]...
在安装了 vite-plugin-svg-icons 插件后,我们可以在 vite.config.js 中进行配置。以下是一个示例配置: import{defineConfig}from'vite'importsvgIconsfrom'vite-plugin-svg-icons'exportdefaultdefineConfig({plugins:[svgIcons({// 指定要处理的 SVG 文件夹路径iconDirs:[require.resolve('src/assets/svgs')],/...
npm install vite-plugin-svg-icons --save-dev 配置 在安装了 vite-plugin-svg-icons 插件后,我们可以在 vite.config.js 中进行配置。以下是一个示例配置: import { defineConfig } from 'vite' import svgIcons from 'vite-plugin-svg-icons' export default defineConfig({ plugins: [ svgIcons({ // 指...
组件库打包后有一个_virtual文件夹,图标在这里。vitepress 本地dev可以看到,是它启动一个devserver,服务可以去查找import 'virtual:svg-icons-register' build不行,是因为vitepress将所有内容打包到app.[hash].js文件中,而图标文件未被打包。 可在theme/index.ts文件中主动动态导入一下即可。import (you-element/_...
本地运行并打包成功,在服务器上报错,打开package.json查看依赖的版本号: vite-plugin-svg-icons版本号被修改了,此版本过低导致报错。 原因是服务器上的npm没有装淘宝镜像。 解决: 安装淘宝npm(cnpm) npm install -g cnpm --registry=https://registry.npm.taobao.org ...
{ "name": "vite-plugin-svg-icons-monorepo", "private": true, "version": "2.0.1", "license": "MIT", "author": "Vben", "scripts": { "stub": "pnpm run prepack --filter ./packages -- --stub", "postinstall": "pnpm run stub", "log": "conventional-changelog -p angular -i CH...
vite-plugin-svg-icons version: ^0.5.0 main.js // svg import 'vite-plugin-svg-icons/register'; vite.config.js plugins: [ createVuePlugin({ jsx: true }), viteSvgIcons({ iconDirs: [path.resolve(process.cwd(), 'src/assets/editor-svg')], symb...
通过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、样式等,现在...
// 确保外部化处理那些你不想打包进库的依赖 external: [ 'vue', 'element-plus', '@element-plus/icons-vue', 'lodash', 'lodash-es', 'vue-i18n', 'vue3-i18n', 'vue-router', 'pinia', 'pinia-plugin-persist', 'mitt', 'vue-types', ...