css - CSS 中的 SVG 图标路径类

Question

我将以下 SVG 图标作为 路径 嵌入到我的 HTML 页面中:

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>

如何将上述 SVG 图标 path 作为 class 包含在 CSS 中？所以我可以像这样在我的 HTML 页面中将它用作 属性:

<i class="chevron-right"></i>

更新:关于已接受的答案，我在使图标正确垂直居中时遇到了一些问题，最终找到了一个更简单的 CSS 代码:

.chevron-right {
    vertical-align: middle;
    content: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

Answer 1

将其用作背景:

.chevron-right {
  display: inline-block;
  width: 1rem;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>') 0 0/contain no-repeat;
}

.chevron-right::before {
  content: "";
  display: block;
  padding-top: 100%;
}

<i class="chevron-right"></i>
<i class="chevron-right" style="width:2rem"></i>
<i class="chevron-right" style="width:4rem"></i>

如果你想要着色考虑蒙版:

.chevron-right {
  display: inline-block;
  width: 1rem;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>') 0 0/contain;
  background: currentColor;
}

.chevron-right::before {
  content: "";
  display: block;
  padding-top: 100%;
}

<i class="chevron-right"></i>
<i class="chevron-right" style="width:2rem;color:red;"></i>
<i class="chevron-right" style="width:4rem;color:blue;"></i>