通过 URI 内联 SVG答案

【问题标题】：Inline SVG via URI通过 URI 内联 SVG
【发布时间】：2016-11-17 17:26:11
【问题描述】：

我正在尝试在 css 中为我的 SVG 图像使用数据 URI。基本方法是将完整数据 URI 设置为 =css 类的背景属性值。

.bg {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

我的问题是：如何将数据 URI 值分解为单独的文件，并在我的 css 类中引用该文件。目标：将所有数据 URI 与基本样式分开，这样它们就不会使 css 过长。

从未使用 URI 来实现 SVG，所以我也对任何人可能有的任何想法持开放态度：通过 URI 实现 SVG。非常感谢！ :)

附：如果有一种自动化的好方法，我将在这个项目中使用 gulp 和 bootstrap sass。

【问题讨论】：

【解决方案1】：

我更喜欢使用 grunt-grunticon，它会为您生成 css 类，如果需要，可以回退到 png。然后，您可以使用 scss 或 sass 以您希望使用的方式@extend 图标。比如@extend .icon-undo;

希望这会有所帮助。祝你好运。

【讨论】：