专栏首页一路向前端使用SVG symbols建立图标系统完整指南

使用SVG symbols建立图标系统完整指南

从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont。现在,一种全新的图标使用方式开始流行了起来——SVG symbols图标。

工作原理

SVG symbols的工作原理:symbol元素用来定义一个图形模板对象,它可以用一个use元素实例化。

symbol元素对图形的作用是在同一文档中多次使用,symbol元素本身是不呈现的。只有symbol元素的实例(亦即,一个引用了symbol的use元素)才能呈现:

<svg>
  <symbol viewBox="0 0 24 24" id="heart">
    <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z">
    </path>
  </symbol>
  <symbol viewBox="0 0 32 32" id="arrow">
    <path fill="#0f0f0f" d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M22.8,13.6l-6,8C16.6,21.9,16.3,22,16,22 s-0.6-0.1-0.8-0.4l-6-8c-0.2-0.3-0.3-0.7-0.1-1S9.6,12,10,12h12c0.4,0,0.7,0.2,0.9,0.6S23,13.3,22.8,13.6z">
    </path>
  </symbol>
</svg>

这段代码使用SVG symbols定义了两个图标,每个symbol元素定义一个图标,图标id分别是heart和arrow,将其放在html文件的body元素内。

通过以下代码引用id为heart的图标:

<svg>
    <use xlink:href="#heart"/>
</svg>

xlink:href属性值就是‘#’加symbol的id名称,那么只需改变这个属性值就可以引用不同的图标。

自动化处理

更多内容请查看原文:使用SVG symbols建立图标系统完整指南

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue最佳实践

    Vue 最佳实践,是参考 Vue 官方风格指南并根据过去 Vue 实际项目开发中的经验总结的一套规范建议。本项目的目的是希望每个 Vue 开发者都能尽快熟悉并上...

    用户6167509
  • 一个基于原生JavaScript开发的、轻量的验证码生成插件

    DEMO:https://jofunliang.github.io/Vcode.js/example.html

    用户6167509
  • Rollup处理并打包JS文件项目实例

    rollup是一款用来es6模块打包代码的构建工具(支持css和js打包)。当我们使用ES6模块编写应用或者库时,它可以打包成一个单独文件提供浏览器和Node....

    用户6167509
  • 快速学习-Scala浮点类型

    cwl_java
  • iconfont采坑

    老梁
  • 快速学习-梅克尔-帕特里夏树

    基数树又叫压缩前缀树(compact prefix tree),是一种空间优化后的字典树,其中如果一个节点只有唯一的子节点,那么这个子节点就会与父节点合并存储 ...

    cwl_java
  • 考试App界面设计要点

    在智能手机时代,App应用开发已经成为发展动向,制作一款App设计效果如何,更多的是由用户的体验效果决定。一个优秀的设计者,制作App时应该多从用户的角度去设计...

    齿轮易创说互联网
  • Web并发页面访问量统计实现

    往期精选 页面访问量统计,可能在上学的时候就讲过如何简单实现,例如在servletContext中保存一个页页面访问次数,然后每访问一次加1;或者每访问一次就把...

    企鹅号小编
  • Oracle 联机重做日志文件(ONLINE LOG FILE)

    --=========================================

    Leshami
  • 聊聊nacos config的deleteConfig

    nacos-1.1.3/config/src/main/java/com/alibaba/nacos/config/server/controller/Conf...

    codecraft

扫码关注云+社区

领取腾讯云代金券