svg图标的使用

图片的格式有很多,前端经常使用的有以下类型:jpg,jpeg,png,gif,svg,这篇文章将简单svg的情况,以及项目中如何使用和配置svg图标

目录

什么是svg图标

SVG图标的优缺点

优点

缺点

svg前端使用场景

SVG在代码中的使用

简单使用创建svg

作为图标引入项目 

img格式引入

项目配置使用 - vite-plugin-svg-icons

使用步骤 

安装

配置

什么是svg图标

svg图标是基于XML的矢量图描述语言,它是一个可缩放的矢量图形(缩放质量不会有所损失),可以通过css或者js进行操作

SVG图标的优缺点

优点

  • 无损压缩:svg图像可以无限制缩放,不会失去图像的质量
  • 可编辑:svg图像可以通过脚本进行交互和动画处理,被非常多的工具读取和修改(比如记事本),支持多种滤镜和特殊效果,在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果,易于修改和编辑
  • 可被搜索:svg的文本和图像分离,导致svg图像可可被搜索,索引和编辑
  • 兼容性好:svg目前已经被大多数主流现代浏览器支持

缺点

  • 复杂度高: svg图像的处理比较复杂,导致文件大小变大,加载时间会比较长

svg前端使用场景

  • 图标图形:svg虽然复杂度高,但是如果是简单的图标使用,svg图标的文件还是比较小的,且因为其缩放无损特性,在不同设备和分辨率的展示效果会更加清晰
  • 动画效果:svg支持通过css和js添加动画效果
  • 交互式图形:canvas的绘制是不支持js事件的,但是svg可以实现交互式图形
  • TailwindCSS:TailwindCSS是目前快速写css的一个插件,目前的流行趋势可以TailwindCSS+svg使用

SVG在代码中的使用

简单使用创建svg

svg具体如果画图是一个复杂的过程,这里只是简单写个代码画一个svg图

<svg width="500" height="500"><circle cx="100" cy="100" r="50" fill="transparent" stroke="#000"></circle>
</svg>

作为图标引入项目 

img格式引入

直接利用img标签,引入图标地址

 <img src="./assets/icons/copyright.svg"/>

img引入svg对于修改颜色非常不方便,如果需要修改 - 要用到CSS3滤镜filter中的drop-shadow

img {drop-shadow(black 80px 0)
}

项目配置使用 - vite-plugin-svg-icons

官网

https://github.com/digitalacorn/vite-plugin-svg-icons/blob/main/README.zh_CN.md

注意,使用这个插件的node和vite的版本号

node version: >=12.0.0vite version: >=2.0.0

官网中的接受很详细了,但是这里按照vue项目,也会进行配置一下

使用步骤 
安装
yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D
配置
  • vite.config.ts 中的配置插件,如下
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// 引入svg的插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),createSvgIconsPlugin({// 将来的项目的图标路径,放src/assets/icons下iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// symbolId的格式 使用时一一对应symbolId: 'icon-[dir]-[name]',}),]
});
  • 入口文件导入
import 'virtual:svg-icons-register'

引入之后,可以在代码中查看svg是否引入成功

  • 简单单个使用
<svg :style="{width: '16px', height: '16px'}"><!-- 具体图标使用 name表示了文件夹对应的名称--><use xlink:href="#icon-copyright" fill="red"></use>
</svg>

对于多个图标,当然要封装组件使用,并进行全局注册

组件简单封装

 创建组件- src/components/svgIcon/index.vue

<template><div><svg :style="{ width: width, height: height }"><use :xlink:href="prefix + name" :fill="color"></use></svg></div>
</template><script setup lang="ts">
defineProps({//xlink:href属性值的前缀prefix: {type: String,default: '#icon-'},//svg矢量图的名字name: String,//svg图标的颜色color: {type: String,default: ""},//svg宽度width: {type: String,default: '16px'},//svg高度height: {type: String,default: '16px'}})
</script>
<style scoped></style>

全局注册组件

创建index.ts在src/components

import SvgIcon from '@/components/svgIcon/index.vue'import type { App, Component } from 'vue';
const components: {[name: string ] : Component} = {SvgIcon}// 全局插件注册
export default {install(app: App) {Object.keys(components).forEach((key: string) => {app.component(key, components[key]);})}
}

在入口文件引入,注册

import gloablComponent from './components/index';
app.use(gloablComponent);

使用

<SvgIcon name="copyright" color="red"></SvgIcon>

到此就结束了,码字不易,简单点个👍🏻吧

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

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

相关文章

udp网络通信 socket

套接字是实现进程间通信的编程。IP可以标定主机在全网的唯一性&#xff0c;端口可以标定进程在主机的唯一性&#xff0c;那么socket通过IP端口号就可以让两个在全网唯一标定的进程进行通信。 套接字有三种&#xff1a; 域间套接字&#xff1a;实现主机内部的进程通信的编程 …

yolov5 +gui界面+单目测距 实现对图片视频摄像头的测距

可实现对图片&#xff0c;视频&#xff0c;摄像头的检测 项目概述 本项目旨在实现一个集成了YOLOv5目标检测算法、图形用户界面&#xff08;GUI&#xff09;以及单目测距功能的系统。该系统能够对图片、视频或实时摄像头输入进行目标检测&#xff0c;并估算目标的距离。通过…

Linux shell编程学习笔记78:cpio命令——文件和目录归档工具

0 前言 在Linux系统中&#xff0c;除了tar命令&#xff0c;我们还可以使用cpio命令来进行文件和目录的归档。 1 cpio命令的功能&#xff0c;帮助信息&#xff0c;格式&#xff0c;选项和参数说明 1.1 cpio命令的功能 cpio 名字来自 "copy in, copy out"&#xf…

具有RC反馈电路的正弦波振荡器(文氏桥振荡器+相移振荡器+双T振荡器)

2024-9-10&#xff0c;星期二&#xff0c;22:13&#xff0c;天气&#xff1a;雨&#xff0c;心情&#xff1a;晴。今天从下午开始淅淅沥沥一直在下雨&#xff0c;还好我有先见之明没骑自行车&#xff0c;但是我忘带伞了&#xff0c;属于说是有点脑子但是不多了&#xff0c;2333…

如何注册谷歌账号(“此电话号码无法验证”问题)

如何注册谷歌账号&#xff08;“此电话号码无法验证”问题&#xff09; 以下注册账号的步骤于 2024.9.10 20:00 成功实施。 文章目录 如何注册谷歌账号&#xff08;“此电话号码无法验证”问题&#xff09;1&#xff09;打开谷歌浏览器2&#xff09;设置浏览器语言【英语&…

Docker基本管理--Dockerfile镜像制作(Docker技术集群与应用)

容器端口映射&#xff1b; 容器间通信&#xff1b; 容器数据卷&#xff1b; DockerFile; 容器端口映射: 实验环境&#xff1a;紧接着之前的快照&#xff0c;将该文件夹拉取进去&#xff1b; 然后执行导入的脚本&#xff0c;会将该目录下所有打包好的镜像文件导入进入。 然后进…

每个python程序员都应该早点知道的 6 个 Python 函数

在编程中&#xff0c;默认参数的引入使得函数调用更为灵活&#xff0c;不仅允许开发者在特定情况下省略某些非必需参数&#xff0c;同时也强调了对参数与实际传递值&#xff08;即论点&#xff09;之间区别的理解&#xff0c;这对于掌握函数工作机制至关重要。 此外&#xff0…

VScode 的简单使用

目录 1. VScode 的使用 1.1 常用插件 1.2 常用快捷键 1. VScode 的使用 1.1 常用插件 1.2 常用快捷键 也可以“ CTRLD ”&#xff1b;使用“CTRL滚轮”即可&#xff1b; ctrl /-&#xff0c;是用来展开/收起代码的&#xff1b; 比如&#xff1a;js 的多行注释是 shiftalt…

[数据集][目标检测]西红柿缺陷检测数据集VOC+YOLO格式17318张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;17318 标注数量(xml文件个数)&#xff1a;17318 标注数量(txt文件个数)&#xff1a;17318 标…

AV1 Bitstream Decoding Process Specification:术语和定义

原文地址&#xff1a;https://aomediacodec.github.io/av1-spec/av1-spec.pdf没有梯子的下载地址&#xff1a;AV1 Bitstream & Decoding Process Specification摘要&#xff1a;这份文档定义了开放媒体联盟&#xff08;Alliance for Open Media&#xff09;AV1视频编解码器…

UE4_后期处理五—饱和度调整、隔离、扭曲、重影

一、色彩饱和度调整&#xff1a; 原图 后期处理材质节点&#xff1a; 效果图&#xff1a; 可以根据参数saturation调整饱和还是去饱和。 当saturation为1时&#xff1a;去饱和度&#xff0c;如下图&#xff1a; 当saturation为0时&#xff1a;原始的一个状态&#xff0c;如下…

展会通过智慧客流统计分析优化运营策略-讯鹏科技

在当今数字化高速发展的时代&#xff0c;展会行业也在积极探索利用智慧科技进行转型与升级。其中&#xff0c;智慧客流统计分析成为了展会优化运营策略的关键要素。 智慧客流统计分析首先为展会提供了精准的数据支撑。通过先进的传感器、摄像头等设备&#xff0c;能够实时、准确…

PyCharm修改背景颜色、修改字体大小+Python常用快捷键+Python常见的运算符

文章目录 PyCharm软件的使用1. 修改背景颜色和字体大小1.1 修改背景颜色1.2 修改字体大小 2. 常用的快捷键3. 常见的运算符3.1 算术运算符3.2 赋值运算符3.3 比较运算符3.4 逻辑运算符 PyCharm软件的使用 1. 修改背景颜色和字体大小 1.1 修改背景颜色 1.2 修改字体大小 2. 常…

图文并茂带你理解Java的SPI机制

目录 一、Java的SPI机制1、什么是Java的SPI &#xff1f;2、JavaSPI 代码示例 (使用Maven项目演示)3、 JavaSPI 机制的核心-ServiceLoader4、实现自己的ServiceLoader5、Java中还有哪些SPI实现&#xff1f; 一、Java的SPI机制 1、什么是Java的SPI &#xff1f; SPI全称 Servi…

中秋快到了,要给哪些国外客户送祝福(附贺卡模板)

马上就要中秋节了&#xff0c;在这里提前祝小伙伴们中秋节快乐&#xff0c;身体健康&#xff0c;阖家团圆&#xff0c;业绩越来越好&#xff0c;公司越来越好&#xff0c;一切都越来越好&#xff01; 中秋节是我们非常重要的几个传统节日之一了&#xff0c;除了我们自己庆祝之…

计算机网络练级第一级————认识网络

目录 网络搁哪&#xff1f; 网络的发展史&#xff08;了解&#xff09; 独立模式&#xff1a; 网络互联&#xff1a; 局域网时期&#xff1a; 广域网时期&#xff1a; 什么是协议 TCP/IP五层/四层模型 用官话来说&#xff1a; 我自己的话来说 第一层应用层&#xff1…

Python+selenium自动化元素定位防踩坑(建议收藏)

踩坑一&#xff1a;StaleElementReferenceException selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: element is not attached to the page document 异常原因&#xff1a; 意思是&#xff0c;引用的元素已过期。原因是页面…

soup.find(‘div‘)获取的数据长度为3,为什么1和3都是空的?

用beautifulSoup中的find&#xff08;‘div’&#xff09;可以获取一个div数据&#xff0c;为什么用len&#xff08;&#xff09;计数是显示长度为3&#xff1f; 实际在打印输出时&#xff0c;1和3又没有内容输出&#xff1f;用print&#xff08;div【0】&#xff09;和print&…

Java小白一文讲清Java中集合相关的知识点(七)

LinkedHashSet LinkedHashSet是HashSet的子类 LinkedHashSet底层是一个LinkedHashMap,底层维护了一个数组双向链表 而在之前讲的HashSet中的链表是单向的哈&#xff0c;注意区分&#xff01; LinkedHashSet根据元素的hashcode值来决定元素的存储位置&#xff0c;同时使用链表…

极限编程XP例题

答案&#xff1a;D 解析&#xff1a; 结对编程&#xff0c;一个人写代码&#xff0c;一个人看&#xff0c;由于是两个或两个以上的人负责&#xff0c;因此选项A 支持共同代码拥有和共同对系统负责是正确的 选项B 由于是一个人写一个人看&#xff0c;变相实现了代码审查 选项…