css - 使用单个棘轮图标作为内联 css

Question

我只使用棘轮系列 ( http://goratchet.com/components/ ) 中的一个图标。我想知道是否可以将图标的 SVG 定义直接嵌入到我的“.css”文件中。

即像..

.tick {
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml ... *svg-definition-in-here* ...
}

ratchicons.svg 中感兴趣的图标代码是......

<glyph glyph-name="check" unicode="&#xe810;" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z" horiz-adv-x="1000" />

Answer 1

如果您将字形数据嵌入到一个路径中并将其转换为相反的方向，您就会得到这个。

html, body, svg {
  width : 100%;
  height: 100%;
  display: block;
  margin: 0;
  border: 0;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -900 900 900">
  <path transform="scale(1, -1)" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z"/>
</svg>

然后您需要做的就是嵌入它...

.tick {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -900 900 900"><path transform="scale(1, -1)" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z"/></svg>')
}

<div class="tick"></div>