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...
一、安装 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 插件: 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...
6.在src/assets文件价下新建svg文件夹,将下载的svg文件放在这个文件夹下 7.在组件中使用 <svg-icon name="airService" :size="16" />
如果以后有其他vite插件,都可以放在这里统一使用。 目前这里只使用了createSvgIcon()这个函数,这个函数从当前vite/plugins目录svg-icon.js文件。 import{createSvgIconsPlugin}from 'vite-plugin-svg-icons'importpathfrom'path'exportdefaultfunctioncreateSvgIcon(){returncreateSvgIconsPlugin({iconDirs:[path.resolve(pr...
vue 使用vite-plugin-svg-icons 安装 npm install vite-plugin-svg-icons --save npm install fast-glob --save 在vite.config.js配置 import{ defineConfig }from'vite'importvuefrom'@vitejs/plugin-vue'import{createSvgIconsPlugin}from'vite-plugin-svg-icons';importpathfrom'path'function resolve(dir) {...
// 使用svg-icon createSvgIconsPlugin({ // 指定需要缓存的图标文件夹 iconDirs: [path.resolve(process.cwd(), 'src/assets/svg/icons')], // 指定symbolId格式 symbolId: 'icon-[name]', }), ], resolve: { alias: { '@': path.resolve(__dirname, './src') ...
原先引用组件的时候需要在目标文件里面import相关组件,现在就可以直接使用无需在目标文件import了, 注意大小写,组件都是大写开始的 vite-plugin-style-import 当你使用unplugin-vue-components来引入ui库的时候,message, notification,toast 等引入样式不生效
简介: Vue3.js中使用svg:vite-plugin-svg-icons 环境 $ node -v v16.14.0 $ pnpm -v 7.4.1 安装依赖 pnpm i -D vite-plugin-svg-icons fast-glob package.json { "dependencies": { "vue": "^3.2.37" }, "devDependencies": { "@vitejs/plugin-vue": "^3.0.0", "fast-glob": "^3.2...
importIconComponentsfrom'@/assets/icons'//svg插件在主文件内需要的配置代码import'virtual:svg-icons-register'...InitCustomConfig().then(config=>{constapp=createApp(App).use(IconComponents)app.mount('#app')...}) 7.直接使用 <svg-iconname="login-password"></svg-icon>...