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

news2024/11/8 22:59:22

通过自定义子组件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.coloradmin.cn/o/2236154.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

wireshark工具使用

复制数据 1.右键展开整帧数据 2.复制“所有可见项目” mark标记数据 标记&#xff1a; 跳转&#xff1a; 保存成文件&#xff1a; 文件–>导出特定分组—>Marked packets only

【SpringCloud】SpringBoot集成Swagger 常用Swagger注解

概述&#xff1a;SpringBoot集成Swagger 常用Swagger注解 导语 相信无论是前端还是后端开发&#xff0c;都或多或少地被接口文档折磨过。前端经常抱怨后端给的接口文档与实际情况不一致。后端又觉得编写及维护接口文档会耗费不少精力&#xff0c;经常来不及更新。其实无论是前…

Webserver(4.9)本地套接字的通信

目录 本地套接字 本地套接字 TCP\UDP实现不同主机、网络通信 本地套接字实现本地的进程间的通信&#xff0c;类似的&#xff0c;一般采用TCP的通信流程 生成套接字文件 #include<arpa/inet.h> #include<stdio.h> #include<stdlib.h> #include<unistd.h&…

[spring源码]spring配置类解析

解析配置类 在启动Spring时&#xff0c;需要传入一个AppConfig.class给ApplicationContext&#xff0c;ApplicationContext会根据AppConfig类封装为一个BeanDefinition&#xff0c;这种BeanDefinition我们把它称为配置类BeanDefinition AnnotationConfigApplicationContext a…

uni-app跨域set-cookie

set-cookie的值是作为一个权限控制的 首先&#xff0c;无论什么接口都会返回一个set-cookie&#xff0c;但未登录时&#xff0c;set-cookie是没有任何权限的 其次&#xff0c;登录接口请求时会修改set-cookie&#xff0c;并且在后续其他接口发起请求时&#xff0c;会在请求头…

chrdevbase驱动之Makefile优化(指定路径复制、删除文件)

对于学习嵌入式linux驱动篇的chrdevbase虚拟设备驱动时&#xff0c;需要将chrdevbase.c编译成.ko文件&#xff0c;应用层程序里需要把chrdevbaseAPP编译成chrdevbaseAPP可执行文件&#xff0c;此外还需要将生成的*.ko *APP文件拷贝至指定目录下&#xff0c;每次修改或者编译代码…

kafka实时返回浏览数据

在安装完kafka(Docker安装kafka_docker 部署kafka-CSDN博客)&#xff0c;查看容器是否启动&#xff1a; docker ps | grep -E kafka|zookeeper 再用python开启服务 from fastapi import FastAPI, Request from kafka import KafkaProducer import kafka import json import …

使用QtWebEngine的Mac应用如何发布App Store

前言 因为QtWebEngine时第三方包,苹果并不直接支持进行App Store上签名和发布,所以构建和发布一个基于使用QtWebEngine的应用程序并不容易,这里我们对Qt 5.8稍微做一些修改,以便让我们的基于QtWeb引擎的应用程序并让签名能够得到苹果的许可。 QtWebEngine提供了C++和Qml的…

C++虚继承演示

在继承中如果出现&#xff1a; 这种情况&#xff0c;B和C都继承了A&#xff0c;D继承了B、C 在D中访问A的成员会出现&#xff1a; 这样的警告 是因为在继承时A出现两条分支&#xff1a;ABD、ACD 编译器不知道访问的A中的元素是经过B继承还是C继承 所以B、C在继承A时要用到…

【赵渝强老师】Redis的RDB数据持久化

Redis 是内存数据库&#xff0c;如果不将内存中的数据库状态保存到磁盘&#xff0c;那么一旦服务器进程退出会造成服务器中的数据库状态也会消失。所以 Redis 提供了数据持久化功能。Redis支持两种方式的持久化&#xff0c;一种是RDB方式&#xff1b;另一种是AOF&#xff08;ap…

【计算机网络】章节 知识点总结

一、计算机网络概述 1. 计算机网络向用户提供的两个最重要的功能&#xff1a;连通性、共享 2. 因特网发展的三个阶段&#xff1a; 第一阶段&#xff1a;从单个网络 ARPANET 向互联网发展的过程。1983 年 TCP/IP 协议成为 ARPANET 上的标准协议。第二阶段&#xff1a;建成三级…

Linux基础(十)——磁盘分区、格式化、检验和挂载

磁盘分区、格式化、检验和挂载 1.观察磁盘的分区状态2.UUID3.磁盘分区&#xff08;gdisk/fdisk&#xff09;3.1 gdisk3.2 fdisk 4.磁盘的格式化4.1 XFS文件系统的格式化4.2 ext4文件系统的格式化 5.文件系统的救援6.文件系统的挂载与卸载6.1 挂载6.2 卸载 7.设置开机挂载8.特殊…

Android的BroadcastReceiver

1.基本概念&#xff1a;BroadCast用于进程间或者线程间通信 本质上是用Binder方法&#xff0c;以AMS为订阅中心&#xff0c;完成注册&#xff0c;发布&#xff0c;监听的操作。 2.简单实现的例子 package com.android.car.myapplication;import android.content.BroadcastRe…

一招解决Mac没有剪切板历史记录的问题

使用Mac的朋友肯定都为Mac的剪切功能苦恼过&#xff0c;旧内容覆盖新内容&#xff0c;导致如果有内容需要重复输入的话&#xff0c;就需要一次一次的重复复制粘贴&#xff0c;非常麻烦 但其实Mac也能够有剪切板历史记录功能&#xff0c;iCopy&#xff0c;让你的Mac也能拥有剪切…

利用泰勒公式近似计算10的平方根

文章目录 1. 泰勒公式是什么2、利用泰勒公式计算 10 \sqrt{10} 10 ​第 1 步&#xff1a;泰勒级数展开第 2 步&#xff1a;计算各阶导数第 3 步&#xff1a;在 x 9 x 9 x9 处计算各阶导数第 4 步&#xff1a;构建各阶泰勒展开式第 5 步&#xff1a;计算 f ( 10 ) f(10) f(1…

python-读写Excel:openpyxl-(4)下拉选项设置

使用openpyxl库的DataValidation对象方法可添加下拉选择列表。 DataValidation参数说明&#xff1a; type&#xff1a; 数据类型("whole", "decimal", "list", "date", "time", "textLength", "custom"…

淘宝商品详情API大揭秘:用Python开启探险之旅

淘宝&#xff0c;一个充满奇迹的丛林 在这个名为淘宝的丛林里&#xff0c;每一件商品都是一座神秘的宝藏。而我们&#xff0c;作为勇敢的探险家&#xff0c;将用Python这把瑞士军刀&#xff0c;去揭开这些宝藏的面纱。准备好了吗&#xff1f;让我们一起踏上这段奇妙的探险之旅…

AJAX 全面教程:从基础到高级

AJAX 全面教程&#xff1a;从基础到高级 目录 什么是 AJAXAJAX 的工作原理AJAX 的主要对象AJAX 的基本用法AJAX 与 JSONAJAX 的高级用法AJAX 的错误处理AJAX 的性能优化AJAX 的安全性AJAX 的应用场景总结与展望 什么是 AJAX AJAX&#xff08;Asynchronous JavaScript and XML…

电路设计中的防接反电路

在现代电子产品设计中,防接反电路是确保设备正常运作、避免损坏的重要措施之一。尤其是在日用电器或工厂生产的电子产品中,常常会涉及电源接反的情况。如果产品设计中没有考虑到这一点,可能会导致电路损坏,甚至对使用者造成安全隐患。因此,如何设计有效的防接反电路,是电…

从零开始学习python 7(持续更新ing)

一、Python函数 1.1 函数的定义 函数的定义&#xff1a;实现【特定功能】的代码块。 函数的作用&#xff1a; 简化代码提高代码重用性便于维护和修改提高代码的可扩展性 函数的三要素&#xff1a; 功能 len() max() sum()参数 s.clear() s.append(华清远见)返回值 s.sort()…