优雅地内联SVG：sass-svg

sass-svg是一个创新的开源项目，它允许你在Sass中直接编写和嵌入SVG图形。这个工具由Sassdash构建，旨在简化前端开发者处理SVG图标的方式。

快速启动

只需一行命令安装：

npm install sass-svg --save

然后在你的Sass文件中导入库，即可开始创作：

@import 'path/to/sass-svg';

以下是一个简单的例子：

.arrow {
  @include svg {
    @include svg('polygon', (
      fill: green,
      points: (50,100 0,0 0,100)
    ));
  }
}

编译后的CSS会将SVG转换为数据URI背景图片，这样你就有了一个绿色箭头！

更 Sass 的示例

sass-svg支持Sass的所有特性，如变量和嵌套，帮助你创建复杂的SVG形状：

$sass-color: #CC6699;
...

这样的灵活性让你能够在样式表中轻松创建复杂的SVG图案，无需额外的文件管理。

使用与注意事项

使用一个简单的混合(mixin)：@include svg($type, $attrs)，其中$type是SVG元素类型，$attrs是元素属性的映射。你可以无限层级地嵌套SVG元素，同时还能包含文本。

但是请注意，虽然sass-svg提供了便利，但过度使用或处理复杂SVG可能导致CSS输出过大，影响性能。因此，建议只用于小型、简单的SVG资产。

项目特点

1. Sass友好 - 直接在Sass代码中编写SVG，利用Sass的强大功能。
2. 简洁API - 通过一个简单混合mixin实现所有操作。
3. 无限嵌套 - 支持任意层级的SVG元素嵌套。
4. 变量支持 - 可以使用Sass变量进行颜色和其他参数的动态设置。

总之，如果你正在寻找一种更直观、更灵活的方式来管理和使用SVG图标，那么sass-svg绝对值得尝试！现在就加入，享受更高效、更美观的前端开发体验。