使用 PostCSS 插件编写 SVG

Avatar of Robin Rendle
Robin Rendle 发布

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

这是一个很酷的 PostCSS 插件,它允许我们在 CSS 中与其他样式一起直接编写 SVG

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

然后这些值将被转换为数据 URI,如下所示

.arrow {
    background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20fill%3D%22green%22%20points%3D%2250%2C100%200%2C0%200%2C100%22%2F%3E%3C%2Fsvg%3E)
}

正如 Sara Soueidan 提到的,我希望能在 Sass 中看到这个功能。

更新:David Khourshid 刚刚创建了 sass-svg,它允许您在 mixin 中编写 SVG。

直接链接 →