【教程】Vue2中使用svg矢量图
1.npm导包
npm i svg-sprite-loader --save
2.创建目录放入svg文件,创建SvgIcon.js
3.SvgIcon.js
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
4.vue.config.js文件中配置
const path = require('path');module.exports = {chainWebpack(config) { config.module.rule('svg').exclude.add(path.resolve(__dirname, 'src/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(path.resolve(__dirname, 'src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()}}
5.在src/compoments/SvgIcon下创建SvgIcon.vue
<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: -0.15em;fill: currentColor;overflow: hidden;
}
</style>
6.main.js
import './icons/SvgIcon.js' //vue中使用svg
import SvgIcon from './components/SvgIcon/SvgIcon.vue'//vue中使用svg
Vue.component('svg-icon', SvgIcon)//vue中使用svg
7.使用方法
<template><div><svg-icon class-name="xxxx" icon-class="xxxx"/></div>
</template><script>export default {name: 'test',
}
</script><style>.star-icon {font-size: 30px;color: gold;}
</style>
8.红框里的就是svg-icon效果
相关文章:

【教程】Vue2中使用svg矢量图
1.npm导包 npm i svg-sprite-loader --save2.创建目录放入svg文件,创建SvgIcon.js 3.SvgIcon.js const req require.context(./svg, false, /\.svg$/) const requireAll requireContext > requireContext.keys().map(requireContext) requireAll(req)4.vue.c…...

简约唯美的404HTML源码
源码介绍 简约唯美的404HTML源码,很适合做网站错误页,将下面的源码放到一个空白的html里面,然后上传到服务器里面即可使用 效果预览 完整源码 <!DOCTYPE html> <html><head><meta charset="utf-8"><title>404 Error Example<…...
PDF 转图片并插入到 EXCEL 再转PDF
pom.xml 引用 <dependency><groupId>com.aspose</groupId><artifactId>aspose-cells</artifactId><version>21.11</version></dependency><dependency><groupId>com.aspose</groupId><artifactId>as…...

jmeter之变量随机参数化以及解决多线程不会随机变化
参考链接: https://www.cnblogs.com/Testing1105/p/12743475.html jmeter 使用random函数多线程运行时数据不会随机变化?_jmeter 线程组循环执行时 变量不变-CSDN博客 1、如下图所示,需要对请求参数 autor 和phone进行随机参数化 2、目前有…...

24/7/12总结
axios Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 get请求: <script>function…...

sentinel网关限流配置及使用
sentinel控制台源码:https://download.csdn.net/download/yixin605691235/89543923 sentinel控制台jar包:https://download.csdn.net/download/yixin605691235/89543931 不同环境直接修改jar包中的application.yml文件中的nacos地址就可以了。 一、网关限…...
# 如何解决 App Store 审核中的 4.3(a) 问题:Guideline 4.3(a) - Design - Spam
如何解决 App Store 审核中的 4.3(a) 问题:Guideline 4.3(a) - Design - Spam 4.3(a) 审核问题是指:你的应用与其他开发者提交的应用在二进制文件、元数据和/或概念上存在相似之处,仅有微小差别。这通常会导致你的应用被视为垃圾应用而被拒绝…...
最长上升子序列(LIS)
最长上升子序列(最长递增子序列,LIS) 给定长度为 n n n的序列 v v v,求此序列中严格递增(上升)的子序列长度最大值(子序列可由原序列中不连续的元素构成) 朴素DP( O ( n 2 ) O(n^2) O(n2)) 闫氏DP分析法 状态表示: 集合 d p dp dp:所有满足…...

自动驾驶车道线检测系列—3D-LaneNet: End-to-End 3D Multiple Lane Detection
文章目录 1. 摘要概述2. 背景介绍3. 方法3.1 俯视图投影3.2 网络结构3.2.1 投影变换层3.2.2 投影变换层3.2.3 道路投影预测分支 3.3 车道预测头3.4 训练和真实值关联 4. 实验4.1 合成 3D 车道数据集4.2 真实世界 3D 车道数据集4.3 评估结果4.4 评估图像仅车道检测 5. 总结和讨论…...
手工创建 postgres kamailio 数据库
测试环境如下: postgres server 16: ip 地址为 192.168.31.100,用户 postgres 的密码为 ****** kamailio v5.7.5: ip 地址为 192.168.31.101 1.1. 创建 kamailio 用户和 kamailio 数据库 ssh 登陆 kamailio (192.168.31.101)&a…...

装饰设计模式
装饰设计模式应用在IO流上面可以得到体现 装饰模式指的是在不改变原类, 不使用继承的基础上,动态地扩展一个对象的功能。 原来的inputstream已经可以读取数据了,但是是一个字节一个字节的读取的,为了优化这个我们采用了buffered,…...

Linux 线程初步解析
1.线程概念 在一个程序里的一个执行路线就叫做线程(thread)。更准确的定义是:线程是“一个进程内部的控制序列。在linux中,由于线程和进程都具有id,都需要调度等等相似性,因此都可以用PCB来描述和控制,线程含有PCB&am…...

为ppt中的文字配色
文字的颜色来源于ppt不可删去的图像的颜色 从各类搜索网站中搜索ppt如何配色,有如下几点: 1.可以使用对比色,表示强调。 2.可以使用近似色,使得和谐统一。 3.最好一张ppt中,使用的颜色不超过三种主要颜色。 但我想强调…...

python-区间内的真素数(赛氪OJ)
[题目描述] 找出正整数 M 和 N 之间(N 不小于 M)的所有真素数。真素数的定义:如果一个正整数 P 为素数,且其反序也为素数,那么 P 就为真素数。 例如,11,13 均为真素数,因为 11 的反序…...
TCP/IP、UDP、HTTP 协议介绍比较和总结
TCP/IP、UDP、HTTP是网络通信中的三种重要协议,各自具有不同的特点和应用场景。以下是对这三种协议的详细介绍、比较和总结。 TCP/IP协议 传输控制协议/互联网协议(TCP/IP, Transmission Control Protocol/Internet Protocol) 特点: 可靠性:TCP提供可靠的通信,通过握手…...

Unity Meta Quest 开发:如何在每只手指上添加 Poke 交互
XR 开发社区: SpatialXR社区:完整课程、项目下载、项目孵化宣发、答疑、投融资、专属圈子 找到玩家物体 OVRCameraRig 下的子物体 HandInteractorsRight/Left(分别管理左右手的 Interactor)下的 HandPokeInteractor 子物体&#x…...
MyBatis的原理?
MyBatis是一个优秀的持久层框架,它支持定制化SQL、存储过程以及高级映射。MyBatis避免了几乎所有的JDBC代码和手动设置参数及获取结果集。MyBatis可以通过简单的XML或注解来配置和映射原生类型、接口和Java的POJOs(Plain Old Java Objects)为…...

数学基础【俗说矩阵】:齐次线性方程和非齐次线性方程求解-学习笔记
一、矩阵基础知识 二元一次方程的传统解法 不论是代入消元法还是加减消元法都统称 【高斯消元法】。 齐次方程组和非齐次方程组 线性方程组的解 线性方程的向量展示 向量规则 矩阵的高斯消元和初等行变行及其规则 高斯消元规则 初等行变换 矩阵经初等行变换成阶梯矩阵&…...

乐尚代驾项目概述
前言 2024年7月17日,最近终于在低效率的情况下把java及其生态的知识点背的差不多了,投了两个礼拜的简历,就一个面试,总结了几点原因。 市场环境不好 要知道,前两年找工作,都不需要投简历,把简历…...
脱发的 7 个原因,不能再瞒着大家了!
《黄帝内经》记载,“发为血之余,肾其华在发”。乌发飘逸的秀发,是年轻之体气血充盈、生机勃发的象征,更是纯粹天然、淡泊雅致的东方美学的体现。年轻一代不仅关注身体的养生,对头发的保护与保养也有了新的认识。头发已经成为当代年…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

如何理解 IP 数据报中的 TTL?
目录 前言理解 前言 面试灵魂一问:说说对 IP 数据报中 TTL 的理解?我们都知道,IP 数据报由首部和数据两部分组成,首部又分为两部分:固定部分和可变部分,共占 20 字节,而即将讨论的 TTL 就位于首…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

使用LangGraph和LangSmith构建多智能体人工智能系统
现在,通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战,比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...

STM32HAL库USART源代码解析及应用
STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题,无需引入,直接可…...
C语言中提供的第三方库之哈希表实现
一. 简介 前面一篇文章简单学习了C语言中第三方库(uthash库)提供对哈希表的操作,文章如下: C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...