如何在标签中导入一次 Flaticons svg 图标包文件<link>，并在每次都不键入路径的情况下使用它

Question

当我从Flaticon下载图标作为svg文件时，我试图用<link>标记导入它们，然后在代码中的任何位置使用它们，而不必每次都键入路径。下面是我的意思的一个例子：

<link rel="stylesheet" type="image/svg+xml" href="../shared/flaticons/project.svg">
<svg class="icon">
<use href="../shared/flaticons/project.svg#user" />
</svg>
<svg class="icon">
<use href="#user" />
</svg>

第一个带有完整路径的SVG图标显示正确，但第二个则不正确。导入<link>似乎毫无用处，因为删除它不会改变任何内容。

这是Flaticon的文档，我将导入类型更改为image/svg+xml，因为我遇到了MIME类型错误，但这两种方法都不起作用。

Answer 1

对于任何一个偶然发现这一点的人，我找到了一个不适用于所有人的解决方案。避免每次都写入路径的方法是将SVG文件的内容直接粘贴到<svg>标记之间的文件中。如果你在文件中有一个大的图标集合，这会很快变得非常难看。

如果您使用的是PHP，您基本上可以在运行时直接导入文件内容，<?php include(/path/to/file.svg); ?>位于文件顶部，其行为就像您直接将整个SVG文件粘贴在里面一样。这将允许您使用第二个示例中的图标，因为可以说，文件存在于当前目录中。