vue3 + element plus使用iconfont 自定义font组件颜色大小可修改

vue3 + element plus使用iconfont 自定义font组件&颜色大小可修改这里写自定义目录标题

  • 自定义SvgIcon.vue
    • 引入iconfont
    • App.vue中引入组件
    • 更改图标大小

参考网上方案新建SvgIcon.vue,但没说明怎么修改颜色及大小,我在这个博客中简单提供下。

自定义SvgIcon.vue

在componet目录下新建SvgIcon.vue组件

 // src/components/SvgIcon.vue
<template><svg :class="svgClass" aria-hidden="true"><use :fill="color" :xlink:href="iconClassName"/></svg>
</template><script lang="ts" setup>
import {computed} from 'vue';const props = defineProps({iconName: {type: String,required: true},className: {type: String,default: ''},color: {type: String,default: '#409eff'}
});
// 图标在 iconfont 中的名字
const iconClassName = computed(() => {return `#${props.iconName}`;
});
// 给图标添加上类名
const svgClass = computed(() => {if (props.className) {return `svg-icon ${props.className}`;}return 'svg-icon';
});
// 给图标添加上颜色
const color = computed(() => {return props.color;
})
</script><script lang="ts">
export default {name: 'svgIcon'
};
</script><style lang="less" scoped>
.svg-icon {position: relative;width: 1em;height: 1em;vertical-align: -2px;fill: currentColor;
}
</style>

引入iconfont

在asserts文件夹中新建一个iconfont文件夹,并在该文件夹下新建一个iconfont.js,把iconfont复制下来即可
  
在这里插入图片描述

App.vue中引入组件

import SvgIcon from '@/components/iconfont/SvgIcon.vue';
import '@/assets/iconfont/iconfont.js';
import ElementPlus from 'element-plus';
// use
app.component('SvgIcon', SvgIcon).use(ElementPlus)

更改图标大小

使用el-icon即可,也可以在SvgIcon.vue中新建

<el-icon :size="14" class="icon"><SvgIcon iconName="icon-xinjian" color="#fff"/></el-icon>

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

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

相关文章

通用大模型演进路线

随着人工智能技术的飞速发展&#xff0c;通用大模型&#xff08;GLMs&#xff09;已经成为人工智能领域的重要研 究方向。通用大模型拥有超大规模参数&#xff0c;通过大规模数据进行训练&#xff0c;具备强大的学习和推理 能力。这些模型在自然语言处理、图像识别、代码生成等…

skynet 实操篇

文章目录 概述demo启动文件skynet_start配置文件main.luastart函数thread_workerskynet_context_message_dispatchskynet_mq_popdispatch_message 小结 概述 上一篇写完skynet入门篇&#xff0c;这一篇写点实操性质的。 demo 对于一个开源框架&#xff0c;大部分都有他们自己…

史上最全的Seata教学并且连接springcloudAlibaba进行使用

来都来了点个赞收藏一下在走呗~~&#x1f339;&#x1f339;玫瑰 一、Seata是什么 Seata&#xff08;Simple Extensible Autonomous Transaction Architecture&#xff0c;简单可扩展自治事务框架&#xff09;是一种分布式事务解决方案&#xff0c;旨在解决分布式系统中的事务…

UPLOAD-LABS靶场[超详细通关教程,通关攻略]

---------------------------------------- 靶场环境&#xff1a; 下载链接&#xff1a; https://codeload.github.com/c0ny1/upload-labs/zip/refs/heads/master 使用小皮集成环境来完成这个靶场 将文件放到WWW目录下就可以进行访问 ------------------------------------…

利用Docker搭建基于Python的Selenium自动化测试环境

在现代软件开发过程中,自动化测试已成为确保软件质量的关键环节。Python与Selenium是常用的自动化测试组合,而利用Docker搭建自动化测试环境,可以提供一致的测试环境、方便的依赖管理和高效的资源使用。本文将详细介绍如何使用Docker搭建基于Python和Selenium的自动化测试环…

Linux服务器单个大文件上传内存限制修改

/etc/apache2/apache2.conf 添加: <Directory /var/www/html> LimitRequestBody 0 </Directory> /etc/php/7.4/apache2/php.ini 修改: upload_max_filesize 1000G post_max_size 1000G max_execution_time 0 max_input_time 0 memory_limit -1 验证修…

Java从入门到精通(十四) ~ 多线程

晚上好&#xff0c;愿这深深的夜色给你带来安宁&#xff0c;让温馨的夜晚抚平你一天的疲惫&#xff0c;美好的梦想在这个寂静的夜晚悄悄成长。 目录 前言 一、多线程是什么&#xff1f; Java中的多线程 二、使用步骤 1.创建方式 1.1 Thread 线程 1.2 Runnable 任务 1.…

iOS ------ KVO KVC

一&#xff0c; KVO KVO介绍 KVO全称KeyValueObserving,俗称键值监听&#xff0c;是苹果提供的一套时事件通知机制。允许对象监听另一个对象特定属性的改变&#xff0c;并在改变时接受事件。一般继承自NSObject的对象都默认支持KVOKVO和NSNotificationCenter都是iOS观察者模式…

MySQL基础练习题11-换座位

题目&#xff1a;交换每两个连续的学生的座位号。如果学生的数量是奇数&#xff0c;则最后一个学生的id不交换。按 id 升序 返回结果表。 准备数据 分析数据 方法一&#xff1a;利用power函数对id进行交换&#xff0c;得出的答案只有0或1 第一步&#xff1a;用power()函数将…

公司常用的监控软件有哪些?2024年六大公司监控软件良心推荐!

在现代企业管理中&#xff0c;监控软件不仅可以帮助提高员工生产力&#xff0c;还可以确保企业数据的安全和保护。小编分享六款公司监控软件&#xff0c;能够满足不同企业的需求&#xff0c;提升管理效率和信息安全。 一、值得推荐的监控软件 1. 固信软件 固信软件https://ww…

【软件测试】--接口测试

1. 接口用例设计 接口测试的测试点 功能测试 单接口功能&#xff1a; 手工测试中的单个业务模块&#xff0c;一般对应一个接口 登陆业务 --> 登陆接口加入购物车业务 --> 加入购物车接口订单业务 --> 订单接口支付业务 --> 支付接口 借助工具、代码。绕开前端界面…

【初阶数据结构题目】1.返回倒数第k个节点

文章目录 题目描述代码 题目描述 返回倒数第k个节点 代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/typedef struct ListNode ListNode; int kthToLast(struct ListNode* head, int k){ListNode* t hea…

域名未备案可以申请SSL证书吗??

域名未备案可以申请SSL证书。SSL证书的申请并不依赖于域名的备案情况&#xff0c;而是在于对域名的掌握权。只要你拥有域名的所有权&#xff0c;即具有对域名管理的权限&#xff0c;就可以在任何时候向认证机构申请SSL证书。 申请SSL证书的流程通常包括以下几个步骤&#xff1a…

做前端4年了,才明白技术的本质不过是工具而已

四年前&#xff0c;我踏上了前端开发的道路&#xff0c;从HTML和CSS到JavaScript&#xff0c;从jQuery到React&#xff0c;每一步都走得踏实而坚定。随着经验的积累&#xff0c;技术的进步&#xff0c;我逐渐认识到&#xff0c;所谓的“技术”&#xff0c;无非是实现目标的一种…

颜色识别基于高斯混合模型(GMM)的查找表分类器(LUT)

文章目录 create_class_gmm 创建高斯混合模型&#xff08;GMM&#xff09;以进行分类任务add_samples_image_class_gmm 提取训练样本&#xff0c;并将其添加到高斯混合模型 (GMM) 的训练数据集中train_class_gmm 训练一个高斯混合模型 (GMM)clear_class_gmm 清除模型create_cla…

Fiddler学习笔记

目录 前言 简介 原理 界面 前言 测试可以使用fiddler工具&#xff0c;通过抓包的方式修改前端参数和模拟后端返回&#xff0c;快速定位缺陷。 简介 Fiddler是HTTP协议调试代理工具&#xff0c;可以记录并检查所有客户端和服务器之间的HTTP和HTTPS请求&#xff0c;允许监视…

题解 - 修改回文(二)(上海月赛2024.7乙组T4)

题目描述 给定一个仅由小写字母组成的字符串 s &#xff0c;你可以添加一些字符&#xff08;也可以不加&#xff09;&#xff0c;使其构成回文串。 请你输出在添加字符数最少的前提下&#xff0c;能够构成字典序最小的回文串。 输入格式 输入共一行&#xff0c;一个字符串 s…

快速幂算法

函数 pow_mod 计算 (x^y \mod \text{mod}) 的值&#xff0c;其中 (x) 是基数&#xff0c;(y) 是指数&#xff0c;(\text{mod}) 是模数。它使用的是“快速幂”算法&#xff0c;这是一种高效计算大整数幂的方法&#xff0c;并在每一步计算中都取模以防止溢出。这个算法的时间复杂…

Python seaborn美化篇-风格style

本文分享Python seaborn中通过风格style美化图形。 风格(style),用于设置the general style of the plots,例如,图中网格线是否开启、颜色、线宽等。 5.2 style设置图形通用样式 5.2.1 axes_style查看style内容 一张图的style包含的内容可通过axes_style()查看, sns…

2024 睿抗机器人开发者大赛CAIP-编程技能赛-本科组(省赛补题3、4)

题4&#xff1a;RC-u4 章鱼图的判断 分数 25 题目&#xff1a; 对于无向图 G(V,E)&#xff0c;我们将有且只有一个环的、大于 2 个顶点的无向连通图称之为章鱼图&#xff0c;因为其形状像是一个环&#xff08;身体&#xff09;带着若干个树&#xff08;触手&#xff09;&a…