如何在CSS中使用SVG图标

文章2020-06-031,489 人已阅来源：网络

如何在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图标时遇到的一些小问题：

图标无法变色。
图标可以通过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具体的兼容性倒不用担心，如果实在担心的话自己再测试一下。

AIHX

如何在CSS中使用SVG图标

先看内容

一些小问题

相关内容