将SVG阴影根与外部源一起使用

Question

在我们的项目中，我们调用所有的图标，如下所示：

<svg focusable="false" aria-hidden="true" class="icon icon--extra-small  ">
<use xlink:href="#icon-search" href="#icon-search"></use>
</svg>

现在，我们正在文档页脚的隐藏div中加载所有图标。

有没有一种方法可以使用svg的外部源，而不必重写所有图标？

Answer 1

我认为JavaScript对于您的项目是可以接受的。这是一个你可以选择做的选项。创建另一个名为svg-icons.js或任何真正的文件。在关闭的</body>标记下方添加<script type="text/javascript" src="svg-icons.js"></script>

在该文件中，添加如下内容：

document.querySelector('.my-icon').innerHTML = '<svg focusable="false" aria-hidden="true" class="icon icon--extra-small  "><use xlink:href="#icon-search" href="#icon-search"></use></svg>';

然后，无论何时您想在html中使用该图标，都可以添加具有相同类的div或span(根据您的需要(：
<div class="my-icon"></div>

组件相当小，所以我不建议这样做。此外，如果你正在使用JQuery，你可以查看$.load((。当开始在整个网站上使用相同的组件时，这将有很大帮助。