Question

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

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

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

从未使用过URI来实现SVG，所以我也可以通过任何的想法开放：通过URI实现SVG。谢谢你！：）

P.S。如果有一个很好的方法来自动化这个，我正在为这个项目使用gulp和bootstrap sass。

Answer 1

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

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