如何在CSS中使用SVG图标

文章2020-06-03883 人已阅来源:网络

如何在CSS中使用SVG图标,其实这个问题在之前的文章svg图标不要转成base64,而是转成DataURI已经写的非常详细了。没有看过的建议看一下,再住下看。

那么这篇文章算是进一步的优化,总共有以下几个小小问题:

  • 之前的网站打开较慢
  • 通过iconfont.cn复制svg功能快速生成并去除无用代码
  • 其它的一些小问题说明

先看内容

首先,我把codepen.io/jakob-e…上面的代码拿出来,针对iconfont.cn的复制svg功能,进行了一些简单的优化,删除无用的类、id、width、height等属性。也可以非常直观的查看优化过的代码是否有效

闲话少说,看东西,点https://aihongxin.com/tool/css_svg.html

使用方法:在iconfont.cn上找到心仪的图标,复制svg,直接粘贴到上面的输入框里面,复制即可。

当然,只要网站不关闭,速度应该会比国外的要快上不少吧。

一些小问题

在css中使用svg图标时遇到的一些小问题:

  1. 图标无法变色。
  2. 图标可以通过background-size控制大小,但是无法使其变形,当然一般情况下变形也不是我们所需要的。img图标是可以变形的。

针对第2个问题除了通过transform外暂时无解,可能是我还不知道方法。

第1个问题通过css中的mask-image属性即可解决,具体看以下演示:

运行代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>给css中的svg图标自定义颜色by:aihongxin.com</title>
</head>
<body>
  <style>
    body{
      background: #eee;
    }
    .icon_color{
      margin: 20px auto;
      width: 68px;
      height: 68px;
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M448.533333 155.797333c67.968 53.098667 115.498667 104.618667 142.592 154.602667 25.664 47.36 35.968 95.808 30.912 145.344l-0.981333 8.256 5.034667-4.117333a143.829333 143.829333 0 0 0 40.533333-57.536l2.218667-6.122667 6.336-19.029333c67.776 46.037333 101.674667 124.010667 101.674666 233.898666 0 164.821333-144.426667 270.037333-263.125333 270.037334-118.72 0-253.866667-70.506667-275.733333-218.069334-21.845333-147.541333 68.757333-216.426667 130.474666-312.533333 41.173333-64.064 67.84-128.981333 80.064-194.730667z' %3E%3C/path%3E%3C/svg%3E");
      background-size: 100% auto;
      background: currentColor; /*这个很重要*/
    }
    .red{
      color: red;
    }
    .blue{
      color: blue;
    }
    .orange{
      color: orange;
    }
    .green{
      color: green;
    }
  </style>
  <div class="icon_color red"></div>
  <div class="icon_color blue"></div>
  <div class="icon_color orange"></div>
  <div class="icon_color green"></div>
</body>
</html>

mask-image具体的兼容性倒不用担心,如果实在担心的话自己再测试一下。