Javascript 如何结合grunt和jade使用SVG

我正在为我的项目使用svg文件，我喜欢让它们在html中“串联”，这样我就可以使用css/js来处理它们

我对这种方法有两个问题：

我使用的是jade模板引擎，所以在添加它们之前，我必须将xml转换为jade 添加了大量xml代码后，我的jade文件真的一团糟 到目前为止，我加载svg图标的方式如下：我将它们放在资产文件夹中，然后像这样加载到jade中：

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

但是在这里，我不能使用js/css来设置它们的样式

---

有没有办法，例如使用Grunt，在我的资产文件夹中查找、获取xml并用它填充我的html代码？

我的方法是使用Grunfile.js中的以下设置

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，grunt svgstore都会为您创建漂亮的ID，包括：

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

---

这很酷，因为现在您可以在CSS中设置此SVG的样式，同时使您编辑的jade文件不受混乱的影响

我不知道Jade，但是您能在SVG中包含CSS/JS吗？

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