前端 svg 图标的使用

已于 2022-03-14 16:54:54 修改
阅读量3.5k 收藏
点赞数 1
分类专栏： # 工作 文章标签： 前端
于 2021-10-28 11:03:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010263423/article/details/121009836
版权

文章目录

寻找 svg 素材

可以在 iconfont 中寻找，注册个账号，寻找好图标放到购物车里，然后添加项目，或者在菜单栏上找资源管理，我的项目

在这里插入图片描述

就可以到下面的界面了
在这里插入图片描述

页面中使用

步骤为：

  • 引入脚本
  • 使用 svg 标签

在这里插入图片描述

// 引入脚本
<script src="https://at.alicdn.com/t/font_2898567_tpf9w52zo9.js"></script>

// 页面中使用
<svg>
  <use xlink:href="#icon-cardboard"></use>
</svg>

更好的使用

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

Lovely Ruby
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发之中svg图标的使用和实例
m0_50207524的博客
06-08 1117
本章讲解svg图标在vue3中使用svg图片我们可在阿里云矢量图标库中下载阿里云矢量图标库。
SVG 在前端的7种使用方法，你还知道哪几种？
weixin_39415598的博客
07-08 9207
theme: smartblue 本文简介 点赞 + 关注 + 收藏 = 学会了 技术一直在演变，在网页中使用 SVG 的方法也层出不穷。每个时期都有对应的最优解。 所以我打算把我知道的 7种 SVG 的使用方法列举出来，有备无患~ 如果你还知道其他方法，可以在评论区补充~ 1. 在浏览器直接打开 ```svg 雷猴 ``` xml 是浏览器能读取的格式，...
SVG在前端中的常见应用
Fulling的博客
05-22 4320
SVG在前端中的常见应用 一、svg标签 1. svg 2. g 二、描边属性 三、模糊和阴影效果 1. 模糊 2. 阴影效果 四、线性渐变和径向渐变 1. 线性渐变 2. 径向渐变 五、绘制 1. 内置形状元素 2. 绘制矩形 3. 绘制圆形 4. 绘制椭圆 5. 绘制线条 6. 绘制多边形 7. 绘制多线条 8. 绘制文本 9. 绘制路径
vue3项目引入svg-基于vuecli-webpack
最新发布
flying_chick的博客
06-18 1061
vue项目引入svg图片
前端提高篇(七十)：SVG基本使用、基本样式、路径path
安之ccy的博客
03-23 5392
SVG 是使用 XML 来描述二维图形和绘图程序的语言。 SVG遵循的是xml的规范，与html5的使用有所区别 SVG绘制出来的是矢量图，放大之后不会失真 应用场景： 1.图形（脑图） 2.图标、logo（矢量图） 3.动效 发展简史及支持情况 1.在2003年，SVG1.1被确立为W3C标准 2.firefox、IE9+、chrome、safari均支持 使用： html： <svg xmlns="http://www.w3.org/2000/svg" version="1.1"></
前端项目如何使用svg矢量图
jgujgu的博客
05-09 5139
不管我们是在做web项目还是后台管理类的项目时，都会用到各种各样的图标，对于图标我们可能会采用切图的方式来实现，但是切图是图片会有这样的问题： 1、页面放大会导致图片放大会变的模糊 2、如果页面中的图片过多的话会造成有很多请求也就代表页面加载慢。 所以基于以上问题我们一般使用svg的矢量图，矢量图一般由设计师提供给前端来转换成字体图标，在项目中使用。 优点：1、放大不会模糊 2、只加载一次不会有多余的请求。 如何使用： 1、我们可以借助iconfont-阿里巴巴矢量图库，把设计好的svg文件通过上传图标至项
前端Vue项目中使用SVG图标详解案例(带源码)
m0_49714202的博客
06-18 5268
前端Vue项目中使用SVG图标详解案例(带源码)
vue-svg图标.zip
10-17
4. **图标使用**：在Vue组件模板中，可以像使用普通组件一样引入SVG图标。例如，如果有一个名为`settings`的SVG图标，可以这样使用： ```html <svg-icon icon="settings" /> ``` 5. **样式调整**：由于SVG图标是...
常用svg，后台管理使用
08-23
4. **使用库如`vue-svg-icon`**：这是一个专门处理SVG图标的Vue插件，它可以自动化处理SVG并将其转化为组件，简化使用过程。 Element UI是一个流行的Vue组件库，它也支持SVG图标。Element提供了一套完整的SVG图标集...
前端图标素材
01-10
在使用这些图标时，前端开发者可以将SVG图标内联嵌入HTML，以实现响应式设计，或者通过CSS控制图标的样式和大小。对于非SVG格式的图标，可以使用精灵图（Sprite）技术，将多个图标合并到一个图像文件中，通过CSS定位...
Web前端矢量小图标的使用方法
11-21
在Web前端开发中，使用小图标是常见的需求，特别是在构建用户界面时，这些图标能够增强用户体验和视觉效果。传统的做法是使用PNG或JPEG等位图格式的图片，但这种方法存在一些缺点，比如文件大小、分辨率问题以及在...
uiw组件库的SVG图标
08-08
本文将详细介绍UIW组件库中的SVG图标以及如何使用它们。 SVG图标相比传统的位图（如PNG、JPEG）有以下几个优势： 1. **矢量图形**：SVG图标基于数学公式定义，因此可以无损缩放，不会出现像素化现象。 2. **轻量级*...
前端VUE2.x优雅使用svg图片作为图标
qq_45598313的博客
09-27 1276
使用svg格式图片作为图标
Bootstrap 按钮（实例 ）
2401_84093443的博客
05-04 762
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
使用 SVG 图标
lio-zero 的博客
10-28 151
没有理由不使用 SVG 图标： .logo { background: url("logo.svg"); } SVG 在所有分辨率下都可以良好缩放，并且支持所有 IE9 以后的浏览器，现在使用它替换您的 .png，.jpg，或 .gif 文件吧。 注意 ：针对仅有图标的按钮，如果 SVG 没有加载成功的话，以下样式对无障碍有所帮助： .no-svg .icon-only::after { ...
前端项目学习记录1：svg图标的封装与使用
前端萌新
04-28 313
。
前端 —— SVG
04-03 1596
0. 简介 SVG：可缩放矢量图形； SVG 是代码，通过浏览器的解析而渲染成一种图形； 可缩放矢量图形是基于可扩展标记语言（XML），以描述二维矢量图形的一种图形格式，由万维网联盟（ World Wide Web Consortium，W3C）指定，是一个开放标准； 矢量图与像素图的不同就在于，矢量图是由数学表达式定义的，矢量图不适合表现色彩丰富的照片，更加适合展示简单的几何图案； ...
前端为什么使用svg图片
MYG_G
07-05 304
为什么使用svg图片
前端可视化——SVG矢量图技术
mapbar_front的博客
02-28 7860
SVG 1、SVG 是一种绘图技术，SVG 的全名叫可缩放矢量图形（Scalable Vector Graphics）。 2、SVG 使用 XML 格式定义图像。 3、可伸缩，不失真。 简单示例： <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" s...
svg图标在前端项目中怎么使用
06-08
在前端项目中使用 SVG 图标可以采用以下两种方式： 1. 直接使用 SVG 文件 将 SVG 文件保存到本地或者服务器上，然后在 HTML 中使用 <svg> 标签嵌入 SVG 图标： ```html <svg class="icon" aria-hidden="true"> <use xlink:href="icon.svg#icon-name"></use> </svg> ``` 其中，class 属性可以用于添加样式，xlink:href 属性指定要引用的 SVG 文件和图标名称。 使用 SVG 图标的优点是可以通过 CSS 控制样式和动画，同时也可以对 SVG 图标进行交互操作。 2. 使用 SVG 图标库 除了直接使用 SVG 文件外，还可以使用 SVG 图标库，如 Font Awesome、Material Design Icons 等。这些库提供了大量的 SVG 图标，可以直接使用 CSS 类名或 JS 调用的方式来使用。 例如，在使用 Font Awesome 图标库时，可以在 HTML 中引入 Font Awesome 的 CSS 文件和 JS 文件： ```html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script> ``` 然后，在 HTML 中使用 <i> 标签来引入图标： ```html <i class="fas fa-search"></i> ``` 其中，fas 表示 Font Awesome Solid 风格，fa-search 表示搜索图标名称。 使用 SVG 图标库的优点是可以快速方便地使用大量的 SVG 图标，同时也支持多种图标风格和定制化设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值