vue3中svg图标的封装与使用

组件封装:

<template><svg :class="svgClass" :style="{ width: size + 'px', height: size + 'px', color: color, verticalAlign:deviation+'em'}" aria-hidden="true"><use :xlink:href="`#icon-${name}`" /></svg>
</template><script>
export default {name: 'svg-icon',props: {name: { type: String, required: true },     // svg 图标名称className: { type: String, default: '' },   // 指定的类样式size: { type: Number, default: 28 },        // 图标尺寸color: { type: String, default: "#000" }, // 图标颜色deviation:{type:Number,default:-0.2} //图标上下偏移量},computed: {  // 计算属性svgClass () {if (this.className) {return 'svg-icon ' + this.className} else {return 'svg-icon'}}}
}
</script><style scoped>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.2em;fill: currentColor;overflow: hidden;padding:0  0.15em;
}
</style>

svg图标存放目录:
在这里插入图片描述
index.js获取svg文件

// 获取当前目录所有为.svg的文件
const req = require.context('./svg', false, /\.svg$/)// 解析获取的.svg文件的文件名称并返回
const requireAll = (requireContext) =>{return requireContext.keys().map(requireContext)
}
requireAll(req)

vue.config中定义svg图标目录

const {defineConfig} = require('@vue/cli-service')
const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)
module.exports = defineConfig({transpileDependencies: true,chainWebpack(config) {config.module.rule('svg').exclude.add(resolve('src/assets/icons'))  // 存放 svg 目录的目录.end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/assets/icons'))  // 存放 svg 目录的目录.end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()},......}

页面中的使用:

<svg-icon name="wode" :size="25"/>

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

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

相关文章

FreeRTOS的任务间通信

文章目录 4 FreeRTOS任务间通信4.1 队列4.1.1 队列的使用4.1.2 队列的创建&#xff0c;删除&#xff0c;复位4.1.3 队列的发送&#xff0c;接收&#xff0c;查询 4.2 邮箱&#xff08;mailbox&#xff09;4.2.1 任务中读写邮箱4.2.2 中断中读写邮箱 4.3 队列集4.3.1 队列集的创…

Vue打包文件dist放在SpringBoot项目下运行(正确实现全过程)

项目开发中&#xff0c;一般我们都会使用SpringBootVue进行前后端开发。 在部署时&#xff0c;会后端启动一个服务&#xff0c;再启动一个nginx&#xff0c;nginx中配置前端打包文件dist进行项目访问。 实际上&#xff0c;我们也可以把打包好的dist目录放在SpringBoot项目下进…

Os-hackNos

下载地址 https://download.vulnhub.com/hacknos/Os-hackNos-1.ova 环境配置如果出现&#xff0c;扫描不到IP的情况&#xff0c;可以尝试vulnhub靶机检测不到IP地址解决办法_vulnhub靶机扫描不到ip-CSDN博客 信息收集 确定靶机地址&#xff1a; 探测到存活主机192.168.111.…

如何利用AI撰写短文案获客?分享6大平台和3大步骤!

从去年开始&#xff0c;很多大厂都在裁员&#xff0c;原因就是因为AI的火爆&#xff0c;替代了很多机械式的劳动力。以前很多人可以通过机械式的工作来摸鱼&#xff0c;现在AI完成的效率比人工的要高很多倍。 国内好用的AI平台非常多&#xff0c;有时候也可以使用几个AI平台结合…

软件设计之Java入门视频(11)

软件设计之Java入门视频(11) 视频教程来自B站尚硅谷&#xff1a; 尚硅谷Java入门视频教程&#xff0c;宋红康java基础视频 相关文件资料&#xff08;百度网盘&#xff09; 提取密码&#xff1a;8op3 idea 下载可以关注 软件管家 公众号 学习内容&#xff1a; 该视频共分为1-7…

STM32学习历程(day2)

GPIO解释 GPIO(General-purpose input/output) 可以配置为八种输入输出模式 引脚电平 0V-3.3V 部分引脚可容忍5v 输出模式可控制端口输出高低电平 用以驱动LED、控制蜂鸣器、模拟通信协议输出时序 输入模式可读取端口的高低电平或电压&#xff0c;用于读取按键输入、外界…

uniapp自定义富文本现实组件(支持查看和收起)

废话不多说上代码 CollapseText.vue <template><view v-if"descr"><scroll-view class"collapse-text" :style"{maxHeight: computedMaxHeight}"><!-- <slot></slot> --><rich-text :nodes"descr&q…

2-网页请求的原理

网页请求的原理 ​ 网络爬虫请求网页的过程可以理解为用户使用浏览器加载网页的过程&#xff0c;这个过程其实是向Web服务器发送请求的过程&#xff0c;即浏览器向Web服务器发送请求&#xff0c;Web服务器会将响应内容以网页形式返回给浏览器。因此&#xff0c;了解浏览器与We…

Android Studio下载Gradle特别慢,甚至超时,失败。。。解决方法

使用Android studio下载或更新gradle时超级慢怎么办&#xff1f; 切换服务器&#xff0c;立马解决。打开gradle配置文件 修改服务器路径 distributionUrlhttps\://mirrors.cloud.tencent.com/gradle/gradle-7.3.3-bin.zip 最后&#xff0c;同步&#xff0c;下载&#xff0c;速…

数据融合工具(1)指定路径下同名图层合并

情景再现&#xff0c;呼叫小编 ————数据合并时&#xff0c;你是否也经常碰到这些情况&#xff1f; 数据存在几何错误&#xff0c;合并失败&#xff01; 数据字段类型不一致&#xff0c;合并失败&#xff01; 合并工具运行有警告信息&#xff0c;不知道是否合并成功&…

2024年中国网络安全市场全景图 -百度下载

是自2018年开始&#xff0c;数说安全发布的第七版全景图。 企业数智化转型加速已经促使网络安全成为全社会关注的焦点&#xff0c;在网络安全边界不断扩大&#xff0c;新理念、新产品、新技术不断融合发展的进程中&#xff0c;数说安全始终秉承科学的方法论&#xff0c;以遵循…

航模插头篇

一、常见的电池插头&#xff08;电调端 是公头 电池端 是母头&#xff09; 电池总是被插的 1.XT60头 过流大 安全系数高 难插拔 2.T插 插拔轻松 过流比较小 容易发烫 电调端 是公头 电池端 是母头 3.香蕉头插孔 过流够 插拔轻松 但 容易插反 爆炸 4.TX90(和XT60差…

11-阿里云服务器 ECS-FileZilla的文件传输

FileZilla的下载与安装以及简单使用(有图解超简单)-CSDN博客 Windows下 FileZilla客户端下载与安装 官方下载地址:https://www.filezilla.cn/download 绿色版我们可以理解为免安装版本,而安装版本则是需要运行Setup的引导程序,最大的区别就是会不会生成注册表。 filezi…

Running cmake version 2.8.12.2解决方案

Centos7安装mysql8.0&#xff0c;编译环节出现如下报错&#xff1a; Running cmake version 2.8.12.2 CMake Warning at CMakeLists.txt:82 (MESSAGE):Please use cmake3 rather than cmake on this platform-- Please install cmake3 (yum install cmake3) CMake Error at CMa…

通过一个单相逆变器仿真深度学习PR控制器

目录 前言 ​编辑 PR控制器的理论 PR控制器不同表达式及其建模 PR控制器连续积分组合及模型 PR控制器连续传递函数及模型 PR控制器离散积分及模型 PR控制器离散传递函数及模型 PR控制器差分方程及模型 系统仿真效果 总结 前言 在项目开发中常用PI控制器&#xff0c;这次在…

深入探索PHP中的多维数组:构建复杂数据结构的艺术

深入探索PHP中的多维数组&#xff1a;构建复杂数据结构的艺术 引言 在PHP开发中&#xff0c;数组&#xff08;Array&#xff09;是一种非常重要的数据类型&#xff0c;它允许我们存储多个值&#xff0c;并且这些值可以是不同类型的。而多维数组&#xff08;Multidimensional …

BeanUtils拷贝List数据

工具类&#xff1a; package com.ssdl.baize.pub;import java.lang.reflect.InvocationTargetException; import java.util.ArrayList; import java.util.List; import java.util.function.Supplier; import org.springframework.beans.BeanUtils;public class BeanConvertUti…

【BUUCTF-PWN】10-bjdctf_2020_babystack

简单的栈溢出&#xff0c;ret2text 64位&#xff0c;开启了NX保护 执行效果&#xff1a; main函数&#xff1a; 因为读入的字符长度可以由用户输入的第一个参数值决定&#xff0c;因此read函数存在栈溢出 覆盖距离为0x108 存在后门函数&#xff1a; 后门函数地址0x4…

AIGC | 在机器学习工作站安装NVIDIA cuDNN 深度学习库

[ 知识是人生的灯塔&#xff0c;只有不断学习&#xff0c;才能照亮前行的道路 ] 0x03.初识与安装 cuDNN 深度学习库 什么是cuDNN? cuDNN&#xff08;CUDA Deep Neural Network library&#xff09;是由英伟达&#xff08;NVIDIA&#xff09;开发的深度学习库&#xff0c;专门用…

昇思学习打卡-5-基于Mindspore实现BERT对话情绪识别

本章节学习一个基本实践–基于Mindspore实现BERT对话情绪识别 自然语言处理任务的应用很广泛&#xff0c;如预训练语言模型例如问答、自然语言推理、命名实体识别与文本分类、搜索引擎优化、机器翻译、语音识别与合成、情感分析、聊天机器人与虚拟助手、文本摘要与生成、信息抽…