vue使用阿里svg图标

在这里插入图片描述
最近开发项目的写前端时候,发现element的图标库不能满足我的需求,当然,大部分是够用的,不过某些特定按钮没有合适的图标,我是发现没有批量导入按钮的图标,所以找了阿里的适量图标库来使用

阿里矢量图标库

阿里矢量图标库有海量的图标,并且可以自定义各种格式和颜色,下载下来放到项目里就可以使用了

  1. 自行搜索需要的图标
    image.png

  2. 点下载进去
    image.png

  3. 修改配色和大小以及需要的格式保存到本地
    image.png

项目图标库配置

  • 在vite.config.js配置路径
    image.png

  • 封装组件
    image.png

<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" /></svg>
</template><script>
export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true},className: {type: String,default: ''}},computed: {iconName () {return `#icon-${this.iconClass}`},svgClass () {if (this.className) {return 'svg-icon ' + this.className} else {return 'svg-icon'}}}
}
</script><style scoped>
.svg-icon {width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;
}
</style>
  • 全局引入组件
    image.png

使用

  • 把下载的svg放到项目图标库位置
    image.png

  • 按钮使用图标

<el-button type="primary" class="handle-btn"><svg-icon icon-class="import" > </svg-icon>批量导入</el-button>
  • 运行效果
    image.png

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

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

相关文章

【PythonWeb开发】Flask-RESTful参数解析

flask-restful中的reqparse.RequestParser是一个用于解析和验证参数的工具。它可以帮助开发者从请求中提取参数&#xff0c;并确保这些参数符合预期的格式和类型。参数解析的意思就是规范化传入的参数并获取到这些参数。 一、什么是 reqparse.RequestParser&#xff1f; reqpa…

深入了解 kotlinx-datetime:配置与使用指南

深入了解 kotlinx-datetime&#xff1a;配置与使用指南 在Kotlin多平台开发中&#xff0c;处理日期和时间是常见的需求。kotlinx-datetime库提供了强大且简洁的API来帮助开发者应对这一挑战。本文将详细介绍如何配置kotlinx-datetime库&#xff0c;并通过生动的示例演示其核心…

ventoy安装和使用

本文涉及一种快捷安装不同版本操作系统的工具的安装和使用。 背景 笔者以前安装系统&#xff0c;一般是先下载系统ISO镜像&#xff0c;使用UltraISO将镜像写入U盘&#xff0c;然后用U盘启动。 近年来着手国产化的适配工作&#xff0c;当然因故无法接触核对业务&#xff0c;主…

《Python游戏编程入门》注-第4章1

《Python游戏编程入门》的第4章是“用户输入&#xff1a;Bomb Cathcer游戏”&#xff0c;通过轮询键盘和鼠标设备状态实现Bomb Cathcer游戏。 1 Bomb Cathcer游戏介绍 “4.1 认识Bomb Cathcer游戏”内容介绍了Bomb Cathcer游戏的玩法&#xff0c;即通过鼠标来控制红色“挡板”…

Unity3D学习FPS游戏(5)武器瞄准和准星

前言&#xff1a;一个FPS游戏最基本的角色控制&#xff0c;在前面几篇已经基本实现&#xff0c;接下来我们将进入到武器篇。本篇将实现武器武器瞄准和准星。 武器瞄准和准星 武器瞄准思路实现效果 武器准星思路实现效果 补充知识协程线性插值 武器瞄准 思路 FPS游戏在准备开枪…

vue-echarts使用

vue-echarts使用 排名柱状图示例代码 汇总示例代码 平均时效示例代码 全图 排名柱状图 示例 代码 // 排名趋势<!-- 排名数据趋势图 --><div class"rank"><div class"rank_title"><div class"rank_title_left"><spa…

大语言模型及LangChain介绍

1. 大语言模型介绍 1.大语言模型总览 LangChain 是一个用于构建基于语言模型的应用程序的框架&#xff0c;特别是与大型语言模型&#xff08;LLMs&#xff09;交互的应用。它旨在简化和加速开发过程&#xff0c;使开发者能够更轻松地创建复杂的自然语言处理&#xff08;NLP&a…

【04】RabbitMQ的集群机制

1、RabbitMQ的性能监控 关于RabbitMQ的性能监控&#xff0c;在管理控制台中提供了非常丰富的展示。例如&#xff1a;首页这个整体监控页面&#xff0c;就展示了非常多详细的信息&#xff1a; 还包括消息的生产消费频率、关键组件的使用情况等等非常多的消息。都可以在这个管理…

GO语言实现AES-CFB加密

这里为了使用方便&#xff0c;实现代码不作为一个函数而是作为一个包&#xff0c;这样在后面的代码中也可以进行复用。包和导入 package encryptimport ("crypto/aes" // 提供 AES 加密算法实现"crypto/cipher" // 提供加密算法接口和模式&…

富格林:利用可信经验敢于追损

富格林指出&#xff0c;在解决因陷阱而导致的亏损问题时&#xff0c;投资者自己首先要具备可信经验以及敢于追损的决心。客观来说&#xff0c;当今贵金属投资行业中的陷阱并不复杂&#xff0c;多半是通过一些伪装和噱头来实现亏损陷阱的布置。富格林将分享以下可信投资经验加强…

Segugio:一款针对恶意软件的进程执行跟踪与安全分析工具

关于Segugio Segugio是一款功能强大的恶意软件安全分析工具&#xff0c;该工具允许我们轻松分析恶意软件执行的关键步骤&#xff0c;并对其进行跟踪分析和安全审计。 Segugio允许执行和跟踪恶意软件感染过程中的关键步骤&#xff0c;其中包括从点击第一阶段到提取恶意软件的最…

Web框架 --- C#中的ActionFilter

Web框架 --- C#中的ActionFilter 什么是Action Filter如何定义Action Filter如何使用ActionFilter 什么是Action Filter Action Filter 是一种用于在执行controller方法之前或之后执行自定义逻辑的机制。>* Action Filter 可以用来处理各种任务&#xff0c;包括但 不限于 日…

基于神经网络的农业病虫害损失预测

基于神经网络的农业病虫害损失预测 【摘 要】鉴于农业病虫害经济损失的预测具有较强的复杂性和非线性特性&#xff0c;设计了一种新型的GRNN预测模型&#xff0c;对农业病虫害经济损失进行预测。该模型基于人工神经网络捕捉非线性变化独特的优越性&#xff0c;在神经网络技术和…

DevCon,我们来了|DAOBase 线下活动(曼谷站)

随着数字化转型的加速&#xff0c;链上经济走在了前沿&#xff0c;为个人和社区赋能。链上金融可以无缝释放更多资金流&#xff0c;用户的链上身份拥有数据控制权&#xff0c;链上游戏能创造身临其境的新体验&#xff0c;许多团队正在打造 Web3 的未来。 本次活动将聚焦在开创…

python数据处理常用操作

数据处理是机器学习中非常重要的一步&#xff0c;以下是一些常用的操作和示例代码&#xff1a; 1. 数据清洗 处理缺失值&#xff1a; import pandas as pd# 读取数据 df pd.read_csv(data.csv)# 删除缺失值 df.dropna(inplaceTrue)# 用均值填充缺失值 df.fillna(df.mean(), i…

YOLO-FaceV2:A Scale and Occlusion Aware Face Detector

摘要 近年来&#xff0c;基于深度学习的人脸检测算法取得了巨大进展。这些算法一般可以分为两类&#xff0c;即像Faster R-CNN这样的两阶段检测器和像YOLO这样的一阶段检测器。由于一阶段检测器在精度和速度之间取得了更好的平衡&#xff0c;因此已被广泛应用于多种场景。在本…

贪心算法与盛雨水问题

啥是盛雨水问题&#xff1f;给个图就熟悉了 欸&#xff1f; 这其中的关键在于&#xff1a; 1. 容量2D化就是长 * 宽 2. 木桶效应&#xff1a;宽取决于短板。 那我们来分析&#xff0c;怎么样能达到最佳的结果呢&#xff1f;穷举一下所有可能性不就好了&#xff1f;每两个板子…

OAK相机的RGB-D彩色相机去畸变做对齐

▌低畸变标准镜头的OAK相机RGB-D对齐的方法 OAK相机内置的RGB-D管道会自动将深度图和RGB图对齐。其思想是将深度图像中的每个像素与彩色图像中对应的相应像素对齐。产生的RGB-D图像可以用于OAK内置的图像识别模型将识别到的2D物体自动映射到三维空间中去&#xff0c;或者产生的…

Information Theoretical Estimators (ITE) Toolbox的使用(MATLAB)

Information Theoretical Estimators (ITE) Toolbox是什么 官方文档&#xff1a; ITE is can estimate several entropy, mutual information, divergence, association measures, cross quantities and kernels on distributions. Thanks to its highly modular design, ITE …

STM32G474硬件CRC16和软件CRC16校验

1、硬件CRC校验和软件CRC校验的多项式&#xff0c;以及初始值 #define CRC_Hardware_POLYNOMIAL_16B 0x8005 //硬件CRC多项式为0x8005 //CRC16x^16 x^15 x^2 1&#xff0c;因为bit151,bit21,bit01&#xff0c;所以正向校验的多项式的值为0x8005 //CRC校验分为正向校验和反…