Question

我正在为我的项目使用svg文件，我喜欢在html中使用'in-line'，以便我可以使用css / js来摆弄它们。

这种方法有两个问题：

我正在使用玉石模板引擎，所以我必须在添加它们之前将xml转换为jade
它真的搞砸了我添加了大量xml代码的玉文件

到目前为止，我加载svg图标的方式如下：我将它们放在assets文件夹中并按照以下方式加载它们：

          div
            img(src='/assets/svg/my_icon.svg')

但是在这里，我不能用js / css来设计它们。

有没有办法，例如使用Grunt查找我的资源文件夹，抓住xml并用它填充我的html代码？

Answer 1

我的方法是在Gruntfile.js中使用grunt-svgstore以及以下设置

svgstore: {
  default:{
    options: {
      prefix : 'icon-', // This will prefix each ID,
      svg: { // will add and overide the the default xmlns="http://www.w3.org/2000/svg" attribute to the resulting SVG
        viewBox : '0 0 100 100',
        xmlns: 'http://www.w3.org/2000/svg'
      }
    },
    files: {
      "<%= folders.src %>/jade/_svgDef.jade": ["<%= folders.src %>/svg/*.svg"]
    }
  }
}

注意：我正在将我文件夹中的所有SVG直接编译成一个 jade 文件，我将其包含在我的layout.jade中，如下所示：< / p>

.svgdef(style="display:none;")
  include _svgDef

对于任何SVG，grunt-svgstore都会为您创建一个很好的ID，包括：

svg(viewBox="0 0 100 100", xmlns="http://www.w3.org/2000/svg")
    use(xlink:href="#icon-Twitter")

这很酷，因为现在你可以在你的CSS中设置这个SVG的样式，同时保持你编辑的玉器文件免于杂乱！

如何使用带有咕噜声和玉石的SVG

1 个答案: