Vue 自定义icon组件封装SVG图标

通过自定义子组件CustomIcon.vue使用SVG图标,相比iconfont下载文件、重新替换更节省时间。

子组件包括:

1. Icons.vue 存放所有SVG图标的path

2. CustomIcon.vue 通过icon的id索引对应的图标

使用的时候需要将 <Icons></Icons> 引到使用的页面里面,图标才能展现。

<template><div style="margin: 200px;"><Icons></Icons><div style="display: flex; align-items: center;"><CustomIcon style="margin-right: 4px; font-size: 24px;" icon="metro"></CustomIcon><span>test</span></div></div>
</template><script>
// 路径结构参考这里
import CustomIcon from "./components/CustomIcon";
import Icons from './components/Icons';export default {components: { CustomIcon, Icons }    
}
</script>

【Icons.vue】

<template><svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">     <symbol id="icon-metro" viewBox="0 0 1024 1024"><path d="M658.98 671.11c-32.77 0-59.43-26.66-59.43-59.43s26.66-59.43 59.43-59.43 59.43 26.66 59.43 59.43-26.66 59.43-59.43 59.43z m0-83.86c-13.47 0-24.43 10.96-24.43 24.43s10.96 24.43 24.43 24.43 24.43-10.96 24.43-24.43-10.96-24.43-24.43-24.43zM379.48 671.11c-32.77 0-59.43-26.66-59.43-59.43s26.66-59.43 59.43-59.43 59.43 26.66 59.43 59.43-26.66 59.43-59.43 59.43z m0-83.86c-13.47 0-24.43 10.96-24.43 24.43s10.96 24.43 24.43 24.43 24.43-10.96 24.43-24.43-10.96-24.43-24.43-24.43zM216.47 903.75c-3.61 0-7.24-1.11-10.37-3.41-7.78-5.73-9.44-16.69-3.7-24.47l73.16-99.25c5.73-7.78 16.69-9.44 24.47-3.7 7.78 5.73 9.44 16.69 3.7 24.47l-73.16 99.25a17.488 17.488 0 0 1-14.1 7.12zM821.76 903.75c-5.37 0-10.67-2.46-14.1-7.12l-73.16-99.25c-5.73-7.78-4.08-18.74 3.7-24.47 7.78-5.74 18.74-4.08 24.47 3.7l73.16 99.25c5.73 7.78 4.08 18.74-3.7 24.47-3.13 2.3-6.76 3.41-10.37 3.41z" p-id="918"></path><path d="M773 858.62H252.7c-9.67 0-17.5-7.83-17.5-17.5s7.83-17.5 17.5-17.5H773c9.67 0 17.5 7.83 17.5 17.5s-7.83 17.5-17.5 17.5zM734.75 743.34h-431.5c-30.74 0-55.75-25.01-55.75-55.75V384.07c0-106.09 86.31-192.4 192.4-192.4h158.19c106.09 0 192.4 86.31 192.4 192.4v303.52c0 30.74-25.01 55.75-55.75 55.75zM439.9 226.66c-86.79 0-157.4 70.61-157.4 157.4v303.52c0 11.44 9.31 20.75 20.75 20.75h431.5c11.44 0 20.75-9.31 20.75-20.75V384.07c0-86.79-70.61-157.4-157.4-157.4H439.91z" p-id="919"></path><path d="M605.55 475h-173.1c-39.12 0-70.95-31.83-70.95-70.95V315c0-9.66 7.83-17.5 17.5-17.5s17.5 7.84 17.5 17.5v89.05c0 19.82 16.13 35.95 35.95 35.95h173.1c19.82 0 35.95-16.13 35.95-35.95V315c0-9.66 7.83-17.5 17.5-17.5s17.5 7.84 17.5 17.5v89.05c0 39.12-31.83 70.95-70.95 70.95zM573 159H465.5c-9.67 0-17.5-7.84-17.5-17.5s7.83-17.5 17.5-17.5H573c9.67 0 17.5 7.84 17.5 17.5S582.67 159 573 159z" p-id="920"></path></symbol><symbol id="icon-trophy" viewBox="0 0 1024 1024"><path d="M38.04 518.35a475.12 487.33 0 1 0 950.24 0 475.12 487.33 0 1 0-950.24 0Z" fill="#07AA74" p-id="1052"></path><path d="M513.16 18.75C258.74 18.75 52.5 224.99 52.5 479.41s206.25 460.66 460.66 460.66 460.66-206.25 460.66-460.66S767.58 18.75 513.16 18.75z m0 769.72c-170.69 0-309.06-138.37-309.06-309.06s138.37-309.06 309.06-309.06 309.06 138.37 309.06 309.06-138.37 309.06-309.06 309.06z" fill="#56D8B0" p-id="1053"></path><path d="M554.89 533.04c30.6 0 56.7-19.22 66.91-46.24h7.46c39.52 0 71.68-32.15 71.68-71.69 0-39.52-32.15-71.68-71.68-71.68h-2.87v-5.68c0-26.81-21.72-48.53-48.52-48.53H448.46c-26.8 0-48.53 21.72-48.53 48.53v5.68h-2.86c-39.52 0-71.68 32.15-71.68 71.68 0 39.53 32.15 71.69 71.68 71.69h7.46c10.2 27.02 36.31 46.24 66.91 46.24h4.6v45.74l-66.26 38.49-0.7 0.4c-0.05 0.03-0.09 0.06-0.14 0.08-0.22 0.13-0.45 0.26-0.66 0.41-0.57 0.35-1.12 0.72-1.66 1.12-0.17 0.11-0.32 0.23-0.48 0.35-0.86 0.66-1.67 1.36-2.44 2.12-0.16 0.14-0.31 0.3-0.46 0.45-0.21 0.21-0.44 0.45-0.65 0.68-0.19 0.2-0.37 0.42-0.56 0.63l-0.04 0.04c-0.58 0.68-1.14 1.39-1.66 2.12-0.18 0.25-0.34 0.49-0.51 0.74a27.898 27.898 0 0 0-3.63 22.57c1.12 4.18 3.16 7.92 5.86 11.02 0.24 0.28 0.49 0.56 0.75 0.83 0 0 0.01 0.01 0.01 0.02 0.26 0.27 0.51 0.53 0.78 0.79s0.54 0.52 0.82 0.77c1.11 0.99 2.3 1.9 3.54 2.72 1.26 0.81 2.58 1.52 3.95 2.13 1.02 0.45 2.08 0.84 3.16 1.16 0.06 0.01 0.1 0.03 0.15 0.05 0.32 0.09 0.65 0.18 0.97 0.26 0.73 0.19 1.48 0.34 2.23 0.47h0.03c0.37 0.06 0.75 0.12 1.13 0.17 0.38 0.06 0.76 0.09 1.15 0.12 0.37 0.04 0.73 0.06 1.1 0.07 0.41 0.02 0.83 0.03 1.23 0.03h180.17c0.41 0 0.83-0.01 1.23-0.03 0.37-0.02 0.74-0.04 1.1-0.07 0.39-0.03 0.78-0.06 1.16-0.12 0.37-0.05 0.75-0.1 1.12-0.17 0.02 0 0.05 0 0.07-0.01 0.73-0.12 1.47-0.28 2.18-0.46 0.32-0.07 0.62-0.16 0.93-0.25l0.21-0.06c0.34-0.11 0.7-0.22 1.04-0.34 0.71-0.24 1.41-0.52 2.1-0.82 1.38-0.6 2.7-1.32 3.95-2.13 1.25-0.82 2.44-1.73 3.55-2.72 0.27-0.25 0.55-0.51 0.82-0.77 0.26-0.26 0.53-0.53 0.78-0.8 0.26-0.28 0.51-0.56 0.76-0.84 2.7-3.11 4.74-6.85 5.86-11.02 2.21-8.19 0.52-16.7-4.14-23.32a30.215 30.215 0 0 0-2.26-2.81c-0.21-0.22-0.42-0.45-0.64-0.67-0.14-0.15-0.29-0.3-0.45-0.44-0.34-0.33-0.7-0.66-1.06-0.97-0.4-0.35-0.82-0.7-1.24-1.03-0.24-0.19-0.49-0.37-0.74-0.56-0.34-0.25-0.71-0.49-1.07-0.73-0.23-0.16-0.46-0.31-0.71-0.45-0.19-0.11-0.39-0.23-0.58-0.34l-0.69-0.4-66.27-38.47v-45.76h4.66z m71.5-133.92h2.87c8.67 0 16 7.33 16 16 0 8.68-7.33 16.01-16 16.01h-2.87v-32.01z m-226.46 32h-2.86c-8.68 0-16-7.33-16-16.01 0-8.67 7.32-16 16-16h2.86v32.01z" fill="#FFFFFF" p-id="1054"></path></symbol></svg>
</template>

【CustomIcon.vue】

<template><svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><use :xlink:href="'#icon-'+icon"></use></svg>
</template><script>export default{props:{icon:String}}
</script>

【SVG图标来源参考】

iconfont-阿里巴巴矢量图标库

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/466896.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面相小白的php反序列化漏洞原理剖析

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文整理反序列化漏洞的一些成因原理 建议学习反序列化之前 先对php基础语法与面向对象有个大体的了解 (我觉得我整理的比较细致&#xff0c;了解这俩是个啥就行) 漏洞实战情况 这个漏洞黑盒几乎不会被发现&am…

ReactPress:深入解析技术方案设计与源码

ReactPress Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎提出宝贵的建议&#xff0c;欢迎一起共建&#xff0c;感谢Star。 ReactPress是一个基于React框架开发的开源发布平台&#xff0c;它不仅仅是一个简单的博客系统&#xff0c;更是一个功能全…

canal1.1.7使用canal-adapter进行mysql同步数据

重要的事情说前面&#xff0c;canal1.1.8需要jdk11以上&#xff0c;大家自行选择&#xff0c;我这由于项目原因只能使用1.1.7兼容版的 文章参考地址&#xff1a; canal 使用详解_canal使用-CSDN博客 使用canal.deployer-1.1.7和canal.adapter-1.1.7实现mysql数据同步_mysql更…

SpringBoot之定时任务

1. 前言 本篇博客是个人的经验之谈&#xff0c;不是普适的解决方案。阅读本篇博客的朋友&#xff0c;可以参考这里的写法&#xff0c;如有不同的见解和想法&#xff0c;欢迎评论区交流。如果此篇博客对你有帮助&#xff0c;感谢点个赞~ 2. 场景 我们讨论在单体项目&#xff0c…

绿色能源发展关键:优化风电运维体系

根据QYResearch调研团队最新发布的《全球风电运维市场报告2023-2029》显示&#xff0c;预计到2029年&#xff0c;全球风电运维市场的规模将攀升至307.8亿美元&#xff0c;并且在接下来的几年里&#xff0c;其年复合增长率&#xff08;CAGR&#xff09;将达到12.5%。 上述图表及…

前端 Canvas 绘画 总结

目录 一、使用案例 1、基础使用案例 2、基本案例改为直接JS实现 二、相关资料 1、API教程文档 2、炫酷案例 一、使用案例 1、基础使用案例 使用Canvas的基本步骤&#xff1a; 1、需要一个canvas标签 2、需要获取 画笔 对象 3、使用canvas提供的api进行绘图 <!--…

力扣排序455题(分发饼干)

假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。 但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i],这是能 让孩子们满足胃口的饼干的最小尺寸;并且每块饼 干j&#xff0c;都有一个尺寸 s[j]。如果 s[j]> g[i]&…

C语言 | Leetcode C语言题解之第537题复数乘法

题目&#xff1a; 题解&#xff1a; bool parseComplexNumber(const char * num, int * real, int * image) {char *token strtok(num, "");*real atoi(token);token strtok(NULL, "i");*image atoi(token);return true; };char * complexNumberMulti…

Android使用scheme方式唤醒处于后台时的App场景

场景&#xff1a;甲App唤醒处于后台时的乙App的目标界面Activity&#xff0c;且乙App的目标界面Activity处于最上层&#xff0c;即已经打开状态&#xff0c;要求甲App使用scheme唤醒乙App时&#xff0c;达到跟从桌面icon拉起App效果一致&#xff0c;不能出现只拉起了乙App的目标…

如何对接低价折扣相对稳定电影票渠道?

对接低价折扣电影票渠道需要经过一系列步骤&#xff0c;以确保能够为用户提供优惠且可靠的购票体验。以下是一个基本的对接流程&#xff1a; 1.市场调研&#xff1a; 调研市场上的电影票销售渠道&#xff0c;了解主要的电影票批发商和分销商。分析竞争对手的折扣电影票服务&a…

【上云拼团Go】如何在腾讯云双十一活动中省钱

1. 前言 双十一已经成为了全球最大的购物狂欢节&#xff0c;除了电商平台的优惠&#xff0c;云计算服务商也纷纷在这个期间推出了诱人的促销活动。腾讯云作为中国云计算的领军企业之一&#xff0c;每年双十一的活动都吸引了大量开发者、企业和个人用户参与。那么&#xff0c;在…

新能源企业在精益变革过程中可能会遇到哪些困难?

在绿色转型的浪潮中&#xff0c;新能源企业作为推动社会可持续发展的先锋力量&#xff0c;正加速迈向精益化管理的新阶段。然而&#xff0c;这条变革之路并非坦途&#xff0c;而是布满了未知与挑战。本文&#xff0c;天行健王春城老师将深入探讨新能源企业在精益变革过程中可能…

Maven的安装配置

文章目录 一、MVN 的下载二、配置maven2.1、更改maven/conf/settings.xml配置2.2、配置环境变量一、MVN 的下载 还是那句话,要去就去官网或者github,别的地方不要去下载。我们下载binaries/ 目录下的 cd /opt/server wget https://downloads.apache.org/maven/maven-3/3.9.6/…

OpenCV视觉分析之目标跟踪(10)估计两个点集之间的刚性变换函数estimateRigidTransform的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算两个2D点集之间的最优仿射变换 estimateRigidTransform 是 OpenCV 中的一个函数&#xff0c;用于估计两个点集之间的刚性变换&#xff08;即…

块存储、文件存储和对象存储详细介绍

块存储、文件存储和对象存储介绍 块存储&#xff1a;像跑车&#xff0c;因为它们都能提供快速的响应和高性能&#xff0c;适合需要即时数据访问的场景&#xff0c;比如数据库和虚拟化技术。 文件存储&#xff1a;像货车&#xff0c;因为它们都能承载大量货物&#xff08;文件&…

A019基于SpringBoot的校园闲置物品交易系统

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…

基于YOLO11/v10/v8/v5深度学习的煤矿传送带异物检测系统设计与实现【python源码+Pyqt5界面+数据集+训练代码】

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…

explain执行计划分析 ref_

这里写目录标题 什么是ExplainExplain命令扩展explain extendedexplain partitions 两点重要提示本文示例使用的数据库表Explain命令(关键字)explain简单示例explain结果列说明【id列】【select_type列】【table列】【type列】 【possible_keys列】【key列】【key_len列】【ref…

关于elementui el-radio 赋值问题

今天遇到这样的问题&#xff1a; 点击的时候&#xff0c;同时选中 照抄官网&#xff01; 后来发现了问题&#xff1a; 也就是说如果你的版本太低&#xff0c;就不能用value&#xff0c;而得用label&#xff0c;于是修改 <el-radio-group v-model"searchTime"&g…

微服务系列六:分布式事务与seata

目录 实验环境说明 前言 一、分布式事务问题与策略 1.1 分布式事务介绍 1.2 分布式事务解决策略分析 二、分布式事务解决方案 Seata 2.1 认识Seata 2.2 Seata的工作原理 2.3 部署Seata微服务 2.3.1 准备数据库表 2.3.2 准备配置文件 2.3.3 docker部署 2.4 微服务集…