当前位置: 首页 > news >正文

前端开发之中svg图标的使用和实例

svg图标的使用和实例

  • 前言
  • 效果图
  • 1、安装插件
  • 2、vue3中使用
    • 2.1、 在components文件夹中,创建公共类SvgIcon/index.vue
    • 2.2、创建icons文件,存放svg图标和将所有的svg图标进行引用并注册成全局组件
    • 2.3、在man.js 中注册
    • 2.4、在vue.config.js中配置svg
    • 2.5、在vue中的调用svg图标
  • 3、在vue2中使用
    • 3.1、在components文件夹中,创建公共类SvgIcon/index.vue
    • 3.2、创建icons文件,存放svg图标和将所有的svg图标进行引用并注册成全局组件
    • 3.3、在man.js中导入
    • 3.4、在vue.config.js中增加配置
    • 3.4、在页面中使用

前言

svg图片我们可在阿里云矢量图标库中下载
阿里云矢量图标库

效果图

在这里插入图片描述
在这里插入图片描述

1、安装插件

npm i svg-sprite-loader --save

2、vue3中使用

2.1、 在components文件夹中,创建公共类SvgIcon/index.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'}},styleExternalIcon () {return {mask: `url(${this.iconClass}) no-repeat 50% 50%`,'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`}}}
}
</script>
<style scoped>
.svg-icon {width: 1.5em;height: 1.5em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
.svg-external-icon {background-color: currentColor;mask-size: cover!important;display: inline-block;
}
</style>

2.2、创建icons文件,存放svg图标和将所有的svg图标进行引用并注册成全局组件

在这里插入图片描述

// 导入 Vue 框架
import { createApp } from 'vue'
import App from '../App.vue'
// 导入 SvgIcon 组件
import SvgIcon from '@/components/svgIcon/index.vue'// 将 SvgIcon 组件注册为全局组件
const app = createApp(App)
app.component('svg-icon', SvgIcon)// 定义一个函数,用于引入所有 svg 文件
const requireAll = requireContext => requireContext.keys().map(requireContext)
// 定义一个上下文,只包含 './svg' 目录下的以 '.svg' 结尾的文件
const req = require.context('./svg', false, /\.svg$/)
// 引入 svg 文件
requireAll(req)app.mount('#app')

2.3、在man.js 中注册

在这里插入图片描述

import svgIcon from '@/components/svgIcon/index.vue'
import './icons/index.js'app.component('svg-icon', svgIcon)

2.4、

相关文章:

前端开发之中svg图标的使用和实例

svg图标的使用和实例 前言效果图1、安装插件2、vue3中使用2.1、 在components文件夹中,创建公共类SvgIcon/index.vue2.2、创建icons文件,存放svg图标和将所有的svg图标进行引用并注册成全局组件2.3、在man.js 中注册2.4、在vue.config.js中配置svg2.5、在vue中的调用svg图标3…...

BeagleBone Black入门总结

文章目录 参考连接重要路径系统镜像下载访问 BeagleBone 参考连接 镜像下载启动系统制作&#xff1a;SD卡烧录工具入门书籍推荐&#xff1a;BeagleBone cookbookBeagleBone概况&#xff1f; 重要路径 官方例程及脚本路径&#xff1a;/var/lib/cloud9 系统镜像下载 疑问&am…...

笔记:Mysql的安全策略

1&#xff0c;安装安全插件 1.检查是否已安装该插件 SELECT PLUGIN_NAME, PLUGIN_STATUS FROM INFORMATION_SCHEMA.PLUGINS WHERE PLUGIN_NAME validate_password;2.安装插件 INSTALL PLUGIN validate_password SONAME validate_password.so;3.修改配置文件 vi /etc/my.cn…...

AI绘画中的图像格式技术

在数字艺术的广阔天地里&#xff0c;AI绘画作为一种新兴的艺术形式&#xff0c;正在逐渐占据一席之地。不同于传统绘画&#xff0c;AI绘画依赖于复杂的算法和机器学习模型来生成图像&#xff0c;而这一切的背后&#xff0c;图像格式技术发挥着至关重要的作用。图像格式不仅关系…...

前端如何封装自己的npm包并且发布到npm注册源

前言 在前端开发中&#xff0c;复用代码是一种常见且高效的实践。通过封装和发布自己的npm包&#xff0c;你可以轻松地在多个项目之间共享代码&#xff0c;并且贡献给社区。以下是一步一步指导你如何封装自己的npm包并发布到npm注册源。 步骤一&#xff1a;创建并设置项目 首…...

vue油色谱画 大卫三角形|大卫五边形|PD图

大卫三角形 大卫五边形 PD图...

【React】前端插件 uuidjs 的使用 --随机生成id

文档1 文档2 使用 1.安装 npm install uuid2.Create a UUID import { v4 as uuidv4 } from uuid; uuidv4(); // ⇨ 9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d3.或使用 CommonJS语法 const { v4: uuidv4 } require(uuid); uuidv4(); // ⇨ 1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4…...

ctfshow-web入门-信息搜集(web11-web20)

目录 1、web11 2、web12 3、web13 4、web14 5、web15 6、web16 7、web17 8、web18 9、web19 10、web20 1、web11 域名其实也可以隐藏信息&#xff0c;比如flag.ctfshow.com 就隐藏了一条信息 查询域名的 DNS 记录&#xff0c;类型为 TXT&#xff08;域名的说明&#…...

C语言详解(动态内存管理)2

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…...

【ubuntu软件版本管理】利用update-alternatives管理ubuntu软件

​ 我们有的时候希望在安装了新软件之后保留旧版本的软件&#xff0c;比如希望保留旧版本的gcc&#xff0c;以防以前写的C编译出问题&#xff0c;这时候就需要版本管理软件update-alternatives。 ​ 在此之前我们需要先弄清楚&#xff0c;什么是ubuntu的软件&#xff1f;拿C源…...

如何把linux安装到单片机中

1.如何把linux安装到单片机中 将Linux安装到单片机中通常不是一个直接的过程&#xff0c;因为单片机&#xff08;如51系列、STC系列等&#xff09;的硬件资源和处理能力有限&#xff0c;而Linux是一个为更强大硬件平台&#xff08;如个人电脑、服务器&#xff09;设计的操作系…...

Ubuntu bash按Table不联想

Ubuntu bash按Table不联想 bash-completion包未安装或损坏&#xff1a; 自动补全功能依赖于bash-completion包。首先&#xff0c;需要确保这个包已经安装。可以通过下面的命令安装或重新安装它&#xff1a; sudo apt install --reinstall bash-completion安装完成后&#xff0c…...

Xcode中给UIView在xib中添加可视化的属性

给UIView在xib中添加可视化的属性 效果如下图&#xff1a; 可以直接设置view 的 borderColor 、borderWidth、cornerRadius&#xff0c;也可以单独指定view的某个角是圆角。减少了代码中的属性。 完整代码&#xff1a; UIViewBorder.h #import <UIKit/UIKit.h>inter…...

中缀表达式和前缀后缀

在中缀表达式中&#xff0c;操作数可能与两个操作符相结合 但是&#xff0c;想要不带括号无歧义&#xff0c;且不需要考虑运算符优先级和结合性 所以考虑 前缀表达式&#xff0c;波兰表达式 后缀表达式 逆波兰表达式 对于人来说&#xff0c;中缀表达式是最容易读懂的。但是对于…...

强化学习面试题

强化学习面试题通常会涵盖该领域的多个方面,包括基本概念、算法、应用以及实践问题。以下是一些常见的强化学习面试题及其简要回答: 基本概念题: 什么是强化学习? 强化学习是一种通过智能体与环境交互来学习最优行为策略的机器学习范式。智能体根据当前状态选择动作,环境…...

Pytorch中的广播机制

一、广播(broadcast)机制概述 在PyTorch中&#xff0c;广播机制(Broadcast)允许对不同形状的张量执行逐元素操作&#xff0c;而无需显式地复制数据。这一机制使得编写代码更加简洁和高效。广播机制遵循一定的规则来扩展较小的张量&#xff0c;使其与较大的张量具有相同的形状 …...

2024年全国一高考数学压轴题

(3) 证明: 显然, 等差数列 { a 1 , . . . , a 4 n 2 } \{a_{1},...,a_{4n2}\} {a1​,...,a4n2​} 是 ( i , j ) (i, j) (i,j)-可分的等价于等差数列 { 1 , . . . , 4 n 2 } \{1,...,4n2\} {1,...,4n2} 是 ( i , j ) (i,j) (i,j)-可分的. 前推后显然, 我们考虑后推前, 在去…...

springboot+vue前后端项目接口校验通信数据完整性

方案&#xff1a;使用国密SM3算法实现数字签名 服务端 maven的pom文件引用 <!-- 国密算法支持 --><dependency><groupId>org.bouncycastle</groupId><artifactId>bcprov-jdk15to18</artifactId><version>1.69</version><…...

进程通信(IPC-Inter Process Communication)

进程之间的通信通过内核空间实现 IPC技术 ①管道(匿名管道/命名管道-FIFO队列) ②System V IPC(消息队列、信号量和共享内存) ③套接字(UNIX套接字&Internet套接字) ※信号 软中断&#xff0c;信号提供了一种处理异步事件的方法&#xff0c;作为进程通信的一种机制&am…...

idea debug时提示”Method breakpoints may dramatically slow down debugging“的解决办法

问题现象 今天同事喊我过去看一个问题&#xff0c;项目正常启动的时候没问题&#xff0c;debug模式就卡住了&#xff0c;很久不动。我推测是哪个断点导致的&#xff0c;一看断点果然有情况。在方法上打了断点。 解决方式(Android Studio一样的解决&#xff09; 1、View Brea…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...