第67讲自定义icon实现

element-plus内置有一些常用的icon供我们使用,但是我们假如需要用自己的icon时候,我们可以搞一个icon自定义组件;

在这里插入图片描述
先把icons文件放到src下;

再新建一个SvgIcon组件;

index.vue

<template><svg class="svg-icon" aria-hidden="true"><use :xlink:href="iconName"></use></svg>
</template><script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({icon: {type: String,required: true}
})const iconName = computed(() => {return `#icon-${props.icon}`
})
</script><style lang="scss" scoped>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>

icons下新建index.js

import SvgIcon from '@/components/SvgIcon'const svgRequired = require.context('./svg', false, /\.svg$/)
svgRequired.keys().forEach((item) => svgRequired(item))// 注册全局组件
export default (app) => {app.component('svg-icon', SvgIcon)
}

main.js里面导入SvgIcon

import SvgIcon from '@/icons'createApp(App).use(store).use(router).use(ElementPlus).use(SvgIcon).mount('#app')

安装 svg-sprite-loader

vue.config.js添加:


const webpack = require('webpack');const path = require('path')
function resolve(dir) {return path.join(__dirname, dir)
}module.exports = {lintOnSave: false,chainWebpack(config) {// 设置 svg-sprite-loader// config 为 webpack 配置对象// config.module 表示创建一个具名规则,以后用来修改规则config.module// 规则.rule('svg')// 忽略.exclude.add(resolve('src/icons'))// 结束.end()// config.module 表示创建一个具名规则,以后用来修改规则config.module// 规则.rule('icons')// 正则,解析 .svg 格式文件.test(/\.svg$/)// 解析的文件.include.add(resolve('src/icons'))// 结束.end()// 新增了一个解析的loader.use('svg-sprite-loader')// 具体的loader.loader('svg-sprite-loader')// loader 的配置.options({symbolId: 'icon-[name]'})// 结束.end()config.plugin('ignore').use(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/))config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()}
}

使用:

<svg-icon icon="password" class="svg-container"></svg-icon>
<svg-icon icon="user" class="svg-container"></svg-icon>

在这里插入图片描述

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

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

相关文章

1.4 Binance_interface API U本位合约行情

Binance_interface API U本位合约行情 Github地址PyTed量化交易研究院 1. API U本位合约行情接口总览 方法解释Pathget_ping测试服务器连通性 PING/fapi/v1/pingget_time获取服务器时间/fapi/v1/timeget_exchangeInfo获取交易规则和交易对/fapi/v1/exchangeInfoget_depth深度…

STL之priority_queue的使用及其模拟实现+仿函数

STL之priority_queue的使用及其模拟实现仿函数 1.priority_queue的介绍2.priority_queue的使用3.priority_queue的模拟实现3.1解析细节3.2仿函数3.3具体实现 1.priority_queue的介绍 优先队列是一种容器适配器&#xff0c;根据严格的弱排序标准&#xff0c;它的第一个元素总是…

springboot/ssm学生请假管理系统 高校请假审批管理系统Java系统

springboot/ssm学生请假管理系统 高校请假审批管理系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5…

C语言:整形存储

#include<stdio.h> int main() {char a -1;signed char b -1;unsigned char c -1;printf("a%d,b%d,c%d", a, b, c);return 0; } b与a都是有符号数结果一样。a的signed相当于省略了。 运行结果 整形提升&#xff1a;整形算术运算总是以至少以缺省整型类型的精…

Hive正则表达式

Hive版本&#xff1a;hive-3.1.2 一、Hive的正则表达式概述 正则表达式是一种用于匹配和操作文本的强大工具&#xff0c;它是由一系列字符和特殊字符组成的模式&#xff0c;用于描述要匹配的文本模式。 Hive的正则表达式灵活使用解决HQL开发过程中的很多问题&#xff0c;本篇文…

AI-数学-高中-25-三角函数一三角函数对称性

原作者视频&#xff1a;【三角函数】【考点精华】3三角函数对称性&#xff08;重要&#xff09;&#xff08;中档&#xff09;_哔哩哔哩_bilibili 1.一个对称点\直线思路&#xff1a; 2.关于两点或两直线对称&#xff1a; 3.两个对称&#xff1a;一个关于点对称、一个关于直线…

数学实验第三版(主编:李继成 赵小艳)课后练习答案(八)(3)

实验八&#xff1a;近似计算 练习三 1. 按要求完成下面的任务&#xff1a; (1)求出函数 处的泰勒展开式&#xff0c;由此计算无理数e的近似值&#xff1b; clc;clear; f(x)exp(-x^2); syms x yf(x); y1matlabFunction(taylor(y,order,20)); 1/y1(1)ans 2.718283693893450 …

MYSQL performance schema详解

文章目录 MYSQL performance schema详解0、performance_schema的介绍1、performance schema入门2、performance_schema表的分类3、performance_schema的简单配置与使用4、常用配置项的参数说明5、重要配置表的相关说明6、performance_schema实践操作MYSQL performance schema详…

智能时代:创新创业的新机遇与挑战

智能时代为创新创业提供了广阔的空间和无限的可能性。以下是一些可能适合智能时代背景的创新创业方向&#xff1a; 人工智能技术应用&#xff1a;人工智能技术是当前科技领域最热门的技术之一&#xff0c;其应用范围不断扩大。创业者可以将人工智能技术应用于各个领域&#xf…

libgflags.a(gflags.cc.o): relocation R_AARCH64_ADR_PREL_PG_HI21

这个问题的解决废了好大功夫&#xff0c;最后google很多论坛才找到方法&#xff0c;特此记录&#xff0c;给大家节省时间 完整版本报错&#xff1a; /usr/bin/ld: /usr/local/lib/libgflags.a(gflags.cc.o): relocation R_AARCH64_ADR_PREL_PG_HI21 against symbol _ZN22gfla…

Android java基础_类的封装

一.面向对象编程的引入 写一个简单的程序输出张三&#xff0c;李四的名字 class Person {String name;String getName() {return "guangdong "name;} };public class Oop {public static void main(String args[]) {Person p1 new Person();p1.name "zhangs…

让Python遇上Office--从编程入门到自动化办公实践

最近仔细的学习了这本《让Python遇上Office》的书&#xff0c;同时把我的学习进程与心得录制了同步视频。 到今天终于把全部90集完成&#xff0c;并且上传到下面的视频平台了&#xff0c;欢迎大家观看并指正&#xff01; 西瓜视频&#xff1a;https://www.ixigua.com/7300628…

洛谷p4391 无限传输

考察字符串周期的题 题目链接 结论 要求字串 s s s的最短循环字串长就是&#xff1a; a n s n − p m t [ n ] ansn-pmt[n] ansn−pmt[n] 证明如下&#xff1a; 这是最大的前缀和后缀 现在我们做如下操作&#xff1a; 补全字段 a a a和字段 b b b&#xff0c;按子段 a a a的…

【数据结构】二叉树的顺序结构及链式结构

目录 1.树的概念及结构 1.1树的概念 1.2树的相关概念 ​编辑 1.3树的表示 1.4树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 2.二叉树概念及结构 2.1二叉树的概念 2.2现实中的二叉树 ​编辑 2.3特殊的二叉树 2.4二叉树的性质 2.5二叉树的存储结…

从信息隐藏到功能隐藏

本文主要记录复旦大学张新鹏教授于2022年12月在第三届CSIG中国媒体取证与安全大会上的汇报

假期刷题打卡--Day29

1、MT1224棋盘 求一个N*N棋盘中的方块总数。 格式 输入格式&#xff1a; 输入整型N 输出格式&#xff1a; 输出整型 样例 1 输入&#xff1a; 2输出&#xff1a; 5备注 考虑到取值范围&#xff0c;可用long整型定义变量 分析过程 这个题目的意思是&#xff0c;在这…

Docker 容器网络:C++ 客户端 — 服务器应用程序。

一、说明 在下面的文章中&#xff0c; 将向您概述 docker 容器之间的通信。docker 通信的验证将通过运行 C 客户端-服务器应用程序和标准“ping”命令来执行。将构建并运行两个单独的 Docker 映像。 由于我会关注 docker 网络方面&#xff0c;因此不会提供 C 详细信息。…

【Linux】学习-进程信号

进程信号 信号入门 生活角度的信号 你在网上买了很多件商品,再等待不同商品快递的到来。但即便快递没有到来,你也知道快递来临时,你该怎么处理快递。也就是你能“识别快递”,也就是你意识里是知道如果这时候快递员送来了你的包裹,你知道该如何处理这些包裹当快递员到了你…

[C# WPF] DataGrid选中行或选中单元格的背景和字体颜色修改

问题描述 WPF中DataGrid的选中行或选中者单元格&#xff0c;在焦点失去后&#xff0c;颜色会很淡&#xff0c;很不明显&#xff0c;不容易区分。 解决方法 在失去焦点的情况下&#xff0c;如何设置行或单元格与选中的时候颜色一样&#xff1f; <DataGrid.Resources>&…

华为问界M9:领跑未来智能交通的自动驾驶黑科技

华为问界M9是一款高端电动汽车&#xff0c;其自动驾驶技术是该车型的重要卖点之一。华为在问界M9上采用了多种传感器和高级算法&#xff0c;实现了在不同场景下的自动驾驶功能&#xff0c;包括自动泊车、自适应巡航、车道保持、自动变道等。 华为问界M9的自动驾驶技术惊艳之处…