背景
我最近读到一篇文章，其中谈到了自托管静态资产，并解释了使用CDN或外部基础设施的风险。这让我思考托管字体&图标我自己。
我知道你可以通过下载字体并使用文件路径作为URL来自托管字体——将其包含在你的CSS中。您还可以为任何图标下载或创建SVG，并将其用作HTML元素。
问题
但是是否可以像在内容属性:before和:after中那样在CSS伪元素中使用自托管SVG？类似于Font Awesome允许您提及其图标的内容代码
注意：我的主要意图是在多个CSS类中重新使用相同的SVG
是，通过数据URI；使用苦咸水或内含物特性。
.icon::before {
display: inline-block;
content:'';
width: 24px;
height: 24px;
}
.icon-menu::before {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 100% 100%;
}<!doctype html>
<html>
<head>
<title>Developer</title>
</head>
<body>
<div class="icon icon-menu"></div>
</body>
</html>