icons not rendered correctly with nuxt-icon

[TobiasDoe]

When I use this Icon with nuxt-icon it doesn't render correctly

Svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10" viewBox="0 0 10 10">
    <defs>
        <path id="a" d="M2.69 1.019H.057v.424H2.69c.101.469.497.827.997.827.497 0 .896-.358.996-.827h3.126v-.424H4.683a1.025 1.025 0 0 0-.996-.827c-.499 0-.895.358-.997.827z"/>
        <path id="c" d="M5.85 1.749H.018v.424H5.85c.099.468.498.828.995.828a1.04 1.04 0 0 0 0-2.08c-.497 0-.896.359-.995.828z"/>
        <path id="e" d="M5.831 1.262H0v.423h5.831c.099.47.498.828.995.828a1.04 1.04 0 0 0 1.04-1.039c0-.574-.467-1.04-1.04-1.04-.497 0-.896.359-.995.828z"/>
    </defs>
    <g fill="none" fill-rule="evenodd">
        <g transform="translate(1 3.566)">
            <mask id="b" fill="#fff">
                <use xlink:href="#a"/>
            </mask>
            <path fill="#14D719" d="M-4.943 7.27h17.752V-4.808H-4.943z" mask="url(#b)"/>
        </g>
        <g transform="translate(1 5.566)">
            <mask id="d" fill="#fff">
                <use xlink:href="#c"/>
            </mask>
            <path fill="#14D719" d="M-4.981 8h17.866V-4.079H-4.981z" mask="url(#d)"/>
        </g>
        <g transform="translate(1 .566)">
            <mask id="f" fill="#fff">
                <use xlink:href="#e"/>
            </mask>
            <path fill="#14D719" d="M-5 7.513h17.866V-4.566H-5z" mask="url(#f)"/>
        </g>
    </g>
</svg>

Expected behavior here is the same icon just with inline-svg

Desktop:

• OS: windows
• Browser: tested all but safari - all have the issue
• Versions: latest

[gitFoxCode]

@TobiasDoe I checked and in my case the icon behaves correctly:

<h1><nuxt-icon name="testicon" filled/> Article title</h1>

Could you give your code from the .vue file?

BTW. your icon has and other such things that force the use of "filled" to work properly, but because of how simple this icon is, you can remake this SVG in any graphics program and generate a simpler svg code that will work automatically and without "filled" (with the ability to get the color from the text)

[TobiasDoe]

@gitFoxCode thanks for the answer and the tip.

I tried to debug it more, and I found even stranger things. first I know the icons work correctly when I only have ONE visible.

I got it to work correctly when I go away from "simple" def-ids: like from #a to #{icon-name}-a. now it shows correctly.

but now things get real crazy: I have now 2 of them, in different components.

when I hide the first one in the nav-list to the left. the second one forgets all his defs.

this is really strange to me.

[gitFoxCode]

@TobiasDoe Could you recreate some test code that contains this bug ? On StackBlitz, code sandbox or something like this

[ShingLi]

error rendering svg icon I had the same question

[gitFoxCode]

@ShingLi Can you send me the source code of the SVG files?

[ShingLi]

@ShingLi Can you send me the source code of the SVG files?

happy to have your reply, phone ->

<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" width="24px" height="24px" viewBox="0 0 24.0 24.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><clipPath id="i0"><path d="M3463,0 L3463,1513 L0,1513 L0,0 L3463,0 Z"></path></clipPath><clipPath id="i1"><path d="M15.048,0 C16.296,0 17.316,1.02 17.316,2.268 L17.316,20.028 C17.316,21.276 16.296,22.296 15.048,22.296 L2.268,22.296 C1.02,22.296 0,21.276 0,20.028 L0,2.268 C0,1.02 1.02,0 2.268,0 Z M15.72,15.66 L1.608,15.66 L1.608,20.04 C1.608,20.4 1.896,20.7 2.268,20.7 L15.048,20.7 C15.42,20.7 15.708,20.4 15.72,20.04 L15.72,15.66 Z M9.912,17.376 C10.344,17.376 10.704,17.736 10.704,18.18 C10.704,18.624 10.344,18.984 9.9,18.984 L7.416,18.984 C6.97196308,18.984 6.61200005,18.6240369 6.61200005,18.18 C6.61200005,17.7359631 6.97196308,17.376 7.416,17.376 L9.912,17.376 Z M15.048,1.608 L2.268,1.608 C1.908,1.608 1.608,1.908 1.608,2.268 L1.608,14.04 L15.708,14.04 L15.708,2.268 C15.708,1.908 15.42,1.608 15.048,1.608 Z"></path></clipPath></defs><g transform="translate(-250.0 -348.0)"><g clip-path="url(#i0)"><g transform="translate(188.0 98.0)"><g transform="translate(48.0 236.0)"><g transform="translate(14.0 14.0)"><g transform="translate(3.3960000000006403 0.9600000000000364)"><g clip-path="url(#i1)"><polygon points="0,0 17.316,0 17.316,22.296 0,22.296 0,0" stroke="none" fill="#999999"></polygon></g></g></g></g></g></g></g></svg>

password ->

<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" width="24px" height="24px" viewBox="0 0 24.0 24.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><clipPath id="i0"><path d="M3463,0 L3463,1513 L0,1513 L0,0 L3463,0 Z"></path></clipPath><clipPath id="i1"><path d="M10.224,0 C11.976,0 13.632,0.696 14.892,1.944 C16.02,3.072 16.692,4.524 16.812,6.084 L17.1,6.084 C18.948,6.084 20.46,7.584 20.46,9.444 L20.46,17.8260959 C20.46,19.6740959 18.948,21.1860959 17.1,21.1860959 L3.36,21.1860959 C1.512,21.1860959 0,19.6740959 0,17.8260959 L0,9.432 C0,7.584 1.512,6.072 3.36,6.072 L3.648,6.072 C3.912,2.688 6.756,0 10.224,0 Z M17.112,8.004 L3.36,8.004 C2.568,8.004 1.92,8.652 1.92,9.444 L1.92,17.8260959 C1.92,18.6180959 2.568,19.2660959 3.36,19.2660959 L17.1,19.2660959 C17.892,19.2660959 18.54,18.6180959 18.54,17.8260959 L18.552,17.8260959 L18.552,9.444 C18.552,8.652 17.904,8.004 17.112,8.004 Z M10.224,1.92 C7.824,1.92 5.832,3.744 5.568,6.084 L14.868,6.084 C14.76,5.04 14.292,4.068 13.524,3.3 C12.636,2.412 11.472,1.92 10.224,1.92 Z"></path></clipPath><clipPath id="i2"><path d="M0.96,0 C1.488,0 1.92,0.432 1.92,0.96 L1.92,4.68 C1.92,5.208 1.488,5.64 0.96,5.64 C0.432,5.64 0,5.208 0,4.68 L0,0.96 C0,0.432 0.432,0 0.96,0 Z"></path></clipPath></defs><g transform="translate(-250.0 -424.0)"><g clip-path="url(#i0)"><g transform="translate(188.0 98.0)"><g transform="translate(48.0 312.0)"><g transform="translate(14.0 14.0)"><g transform="translate(1.8360000000011496 1.7999999999999545)"><g clip-path="url(#i1)"><polygon points="0,0 20.46,0 20.46,21.1860959 0,21.1860959 0,0" stroke="none" fill="#999999"></polygon></g></g><g transform="translate(11.10000000000218 12.904)"><g clip-path="url(#i2)"><polygon points="0,0 1.92,0 1.92,5.64 0,5.64 0,0" stroke="none" fill="#999999"></polygon></g></g></g></g></g></g></g></svg>

can you see it?

[gitFoxCode]

@ShingLi These icons are unnecessarily complicated, they can be simplified, for example "phone":

<svg width="145" height="186" viewBox="0 0 145 186" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M125.4 0C135.8 0 144.3 8.5 144.3 18.9V166.9C144.3 177.3 135.8 185.8 125.4 185.8H18.9C8.5 185.8 0 177.3 0 166.9V18.9C0 8.5 8.5 0 18.9 0H125.4ZM131 130.5H13.4V167C13.4 170 15.8 172.5 18.9 172.5H125.4C128.5 172.5 130.9 170 131 167V130.5ZM82.6 144.8C86.2 144.8 89.2 147.8 89.2 151.5C89.2 155.2 86.2 158.2 82.5 158.2H61.8C58.0997 158.2 55.1 155.2 55.1 151.5C55.1 147.8 58.0997 144.8 61.8 144.8H82.6ZM125.4 13.4H18.9C15.9 13.4 13.4 15.9 13.4 18.9V117H130.9V18.9C130.9 15.9 128.5 13.4 125.4 13.4Z" fill="black"/>
</svg>

Your SVG code contains "multiple icons simultaneously" and module doesn't know how to handle it well. For the moment, the best solution to this problem would be to simplify code of these icons, or you can also try using the nuxt/icon module