How to import a Flaticons svg icon pack file in <link> tag once and use it without typing path-CodePudding

When I download icons from Flaticon as an svg file, I'm trying to import them with a <link> tag and then use them anywhere in my code without typing the path every time. Here is an example of what I mean:


<link rel="stylesheet" type="image/svg xml" href="../shared/flaticons/project.svg">

<svg >
    <use href="../shared/flaticons/project.svg#user" />
</svg>
<svg >
    <use href="#user" />
</svg>

The first SVG icon with the full path displays properly, but the second one does not. It seems like import <link> is effectively useless as removing it changes nothing.

Here's the documentation from Flaticon, I changed the import type to image/svg xml as I was getting MIME type errors, but neither way works.

CodePudding user response：

For anyone who stumbles on this, I found a solution which won't work for everyone. The way to avoid writing the path every time, is to have the contents of the SVG file pasted directly into your file between <svg> tags. If you have a large collection of icons in the file this becomes very unsightly very quickly.

If you're using PHP, you can essentially import the file contents directly at runtime with <?php include(/path/to/file.svg); ?> at the top of your file and it'll behave as if you pasted the entire SVG file inside directly. This will allow you to use the icons as in the second example, because the files exist in the current directory so to speak.