不显示 SVG

Question

我正在做一个 Jekyll 项目，我想在其中使用 Font Awesome Icon 作为 SVG，而不是一次声明它们。所以我写了一个 jekyll 插件，当它起作用时我会把它转换成 Gem 来声明只使用过的图标。

我的问题是我的 HTML 代码没问题，我可以看到 SVG 定义和 SVG 图标 use 但是图标没有显示，我只有一个 shadow root (closed)。

你能帮我一些忙吗？

这是一个现场演示，您可以在其中找到 2 个图标：https://deploy-preview-65--pedantic-ramanujan-f13a37.netlify.com/projet/bataille-navale/

它们是一个 #fab.fa-dev 和一个 #fab.fa-facebook 图标，应该显示在图像下方。

我的 svg 声明是

<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs>
            <symbol id="fab.fa-dev" viewBox="0 0 1024 1024">
            <title>dev</title>
            <path class="path1" d="&quot;M120.12 208.29c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.47h17.45c3.88 0 7.77-1.45 11.65-4.35 3.88-2.9 5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.41 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.19c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.98h47.38c35.44 0 47.36 28.46 47.37 47.28l.01 70.93zm100.68-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16.29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19l-.01 29.52zm103.64 115.29c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.72 29.57-113.72h32.58l-38.46 144.8z"></path>
        </symbol>
        <symbol id="fab.fa-facebook" viewBox="0 0 1024 1024">
            <title>facebook</title>
            <path class="path1" d="&quot;M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"></path>
        </symbol>

                </defs>
            </svg>

然后我像这样使用 SVG :

<svg class="icon"><use xlink:href="#fab.fa-dev"></use></svg>

如果您想了解有关代码的更多详细信息，请参阅此处的拉取请求：https://github.com/sylvainmetayer/sylvainmetayer/pull/65

Answer 1

在编写 Path 公式时，引号无效 - & quot;

<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs>
            <symbol id="fab.fa-dev" viewBox="0 0 1024 1024">
            <title>dev</title>
            <path class="path1" d="M120.12 208.29c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.47h17.45c3.88 0 7.77-1.45 11.65-4.35 3.88-2.9 5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.41 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.19c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.98h47.38c35.44 0 47.36 28.46 47.37 47.28l.01 70.93zm100.68-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16.29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19l-.01 29.52zm103.64 115.29c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.72 29.57-113.72h32.58l-38.46 144.8z"></path>
        </symbol>
        <symbol id="fab.fa-facebook" viewBox="0 0 1024 1024">
            <title>facebook</title>
            <path class="path1" d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"></path>
        </symbol>

                </defs>
</svg> 
   
    <svg class="icon">
        <use xlink:href="#fab.fa-dev"></use>
    <use xlink:href="#fab.fa-facebook" transform="translate(100,0)"></use>
   
    </svg>

不显示 SVG

SVG not displayed

ruby

svg

jekyll