在Vue 3项目中使用SVG图标(svg-icon),你可以按照以下步骤进行操作: 1. 安装并引入svg-icon相关的Vue 3插件或组件 首先,你需要安装一个能够将SVG图标转换为Vue组件的插件,比如vite-plugin-svg-icons。如果你使用的是Vite构建工具,可以通过以下命令安装: bash pnpm install vite-plugin-svg-icons -D 或者如果你...
import{ createSvgIconsPlugin }from"vite-plugin-svg-icons";//svgIconplugins:[// svg组件化支持createSvgIconsPlugin({iconDirs: [pathResolve("../src/assets/svg")],// 指定symbolId格式symbolId:"icon-[name]",customDomId:"xxx-svgs",// 避免多项目互相影响}), ], 注:svg文件目录:/src/assets/...
(4)在compenonts文件夹中建一个SvgIcon文件夹,新建index.js文件 import * as components from '@element-plus/icons-vue';//默认导出exportdefault{//install 方法用于将插件安装到 Vue 应用实例中install: (app) =>{//遍历从 '@element-plus/icons-vue' 导入的所有组件for(const keyincomponents) {//获取...
通过这个组件，你可以轻松地引入并使用 SVG 图标，同时可以自定义样式和颜色。这个 SvgIcon 组件将为你的项目注入无限的灵活性，让图标的使用如行云流水般顺畅！步骤 4：挂载组件 接下来，我们需要将刚刚创建的 SvgIcon 组件引入并挂载到我们的 Vue 应用中。在 main.js 中，我们将加载组件和必要的注册脚本，让它们...
<el-iconcolor="#19e5e6"size="24"></el-icon> 3. 如果是全量引入icon,则可以一键复制代码,格式上仍然不如2.0版本好用。 4. 全量引入icon后会发现有些icon项目用不到,项目ui新增的icon又不能使用同样格式去调用。 5. 不如直接放弃element 的icon组件,采用自行封装svg组件。 操作流程 依赖安装...
SvgIcon/index.vue 封装<svg-icon />组件 svg目录存放你的svg格式的文件 index.js 全局注册svg的钩子 svgTagView.js svg插件 第二步:封装(转换并读取svg)文件的插件 1. 首先在svgTagView.js中引入node文件系统,并在vite中使用 import { readFileSync, readdirSync } from 'fs' ...
<svg-icon iconName="q" /> 1. 下面我们就开始编写插件及组件,来实现它,分5步走 第一步: 建立所需文件 第二步:封装转换并读取svg文件的插件 第三步:利用vite transformIndexHtml封装渲染svg内容 第四步:封装vue组件并全局注册 第五步:页面中应用传值 ...
svgName: { type: String, default: '' }, width: { type: String, default: '20px' }, height: { type: String, default: '20px' }, color: { type: String, default: '#000' } })<template></template>.svg-icon { display: block; width: 42px; height: 40px; background-color: #...
一、安装 vite-plugin-svg-icons 二、创建图标文件夹 三、main.ts 引入注册脚本 四、vite.config.ts 插件配置 五、TypeScript支持 六、组件封装 七、使用 Element Plus 图标库往往满足不了实际开发需求,可以引用和使用第三方例如 iconfont 的图标,本节通过整合 vite-plugin-svg-icons 插件使用第三方图标库。
0.SvgIcon全局组件 全局组件是指在应用程序的任何位置使用的组件,使用全局组件前需要在Vus.js实例中注册,并将其挂载到实例中。全局组件是可复用的Vus.js实例。 1.安装依赖svg-sprite-loader npm install svg-sprite-loader -D 安装成功后,在package.json文件中可以看到安装成功的版本号 ...