SVGs don't load (no errors)

[ArtemKolichenkov]

For some reason this plugin doesn't work for me. There are no errors in terminal or browser console. It just renders an blank html tag with the icon name.

I tried to switch position of the plugin in rollup.config.js (before and after svelte) but that didn't help either.

Here's my code

<script>
  export let title;
  export let href;
  import settings from "./Icons/filter.svg";
</script>

<li>
  <settings width="20"/>
  <a {href}>{title}</a>
</li>

This is how it looks in inspector

[alekspetrov]

+1 The same issue

[ArtemKolichenkov]

Forgot to mention versions of rollup and svelte I'm using: "rollup": "^1.20.0", "svelte": "^3.0.0"

[MKRhere]

Thank you for the version update; I'll attempt to reproduce the issue today. If you could link to or post the SVG you used, would be super useful to reproduce too.

[ArtemKolichenkov]

@MKRhere I've used feather icons - https://feathericons.com/ You can try Settings or Filter but it doesn't matter which one as far as I tested.

[c19]

same problem here.

[c19]

hmmm, I'm not sure what happened, but it works now. try add xmlns="http://www.w3.org/2000/svg" to the svg tag.

[jzfgo]

Same here. In my case I'm using Svelte + Routify.

"@sveltech/routify": "^1.7.13" "svelte": "^3.23.0" "rollup": "^2.14.0"

hmmm, I'm not sure what happened, but it works now. try add xmlns="http://www.w3.org/2000/svg" to the svg tag.

@c19, care to share your working SVG for debugging?

[c19]

@jzfgo sorry, didn't check the email last a few days.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5120 1024">
  <path
    d="M230.997333 512L116.053333 626.986667 0
    512l116.010667-116.010667L230.997333 512zM512 230.997333l197.973333
    197.973334 116.053334-115.968L512 0 197.973333 314.026667l116.053334
    115.968L512 230.997333z m395.989333 164.992L793.002667 512l116.010666
    116.010667L1024.981333 512l-116.992-116.010667zM512
    793.002667l-197.973333-198.997334-116.053334 116.010667L512
    1024l314.026667-314.026667-116.053334-115.968L512 793.002667z
    m0-165.973334l116.010667-116.053333L512 396.032 395.989333 512 512
    626.986667z m1220.010667
    11.946667v-1.962667c0-75.008-40.021333-113.024-105.002667-138.026666
    39.978667-21.973333 73.984-58.026667
    73.984-121.002667v-1.962667c0-88.021333-70.997333-145.024-185.002667-145.024h-260.992v561.024h267.008c126.976
    0.981333 210.005333-51.029333 210.005334-153.002666z
    m-154.026667-239.957333c0 41.984-34.005333 58.965333-89.002667
    58.965333h-113.962666V338.986667h121.984c52.010667 0 80.981333 20.992
    80.981333 58.026666v2.005334z m31.018667 224c0 41.984-32.981333
    61.013333-87.04 61.013333h-146.944v-123.050667h142.976c63.018667 0 91.008
    23.04 91.008 61.013334v1.024z m381.994666
    169.984V230.997333h-123.989333v561.024h123.989333v0.981334z m664.021334
    0V230.997333h-122.026667v346.026667l-262.997333-346.026667h-114.005334v561.024h122.026667v-356.010666l272
    356.992h104.96z m683.946666 0L3098.026667 228.010667h-113.962667l-241.024
    564.992h127.018667l50.986666-125.994667h237.013334l50.986666
    125.994667h130.005334z m-224.981333-235.008h-148.992l75.008-181.973334
    73.984 181.973334z m814.037333
    235.008V230.997333h-122.026666v346.026667l-262.997334-346.026667h-114.005333v561.024h122.026667v-356.010666l272
    356.992h104.96z m636.970667-91.008l-78.976-78.976c-44.032
    39.978667-83.029333 65.962667-148.010667 65.962666-96
    0-162.986667-80-162.986666-176v-2.986666c0-96 67.968-174.976
    162.986666-174.976 55.978667 0 100.010667 23.978667 144
    62.976l78.976-91.008c-51.968-50.986667-114.986667-86.997333-220.970666-86.997334-171.989333
    0-292.992 130.986667-292.992 290.005334V512c0 160.981333 122.965333
    288.981333 288 288.981333 107.989333 1.024 171.989333-36.992
    229.973333-98.986666z m527.018667
    91.008v-109.994667h-305.024v-118.016h265.002666v-109.994667h-265.002666V340.992h301.013333V230.997333h-422.997333v561.024h427.008v0.981334z" />
</svg>

<svg id="icon-h-top-menu-s" viewBox="0 0 1024 1024">
    <path d="M599.381333 424.618667H424.618667v174.762666h174.762666V424.618667z m0-253.952H424.618667v174.293333h174.762666V170.666667z m0 508.373333H424.618667V853.333333h174.762666v-174.293333zM344.96 424.618667H170.666667v174.762666h174.293333V424.618667zM853.333333 170.666667h-174.293333v174.293333H853.333333V170.666667z m0 508.373333h-174.293333V853.333333H853.333333v-174.293333z m-508.373333 0H170.666667V853.333333h174.293333v-174.293333zM853.333333 424.618667h-174.293333v174.762666H853.333333V424.618667zM344.96 170.666667H170.666667v174.293333h174.293333V170.666667z"></path>
</svg>

both works. I guess it has something to do with how it's being used.

import BinanceIcon from "./icons/binance.svg";
  import MenuIcon from "./icons/menu.svg";

<BinanceIcon width="120px" height="24px" />
<MenuIcon width="24px" height="24px" />

Looks like it would work when width and height is assigned.

[MKRhere]

I'm not able to reproduce the issue, so can someone make a smallish sample repo or gist where it doesn't work? Thanks!

[jzfgo]

@c19 Thanks. I tried your code and it works.

@MKRhere The problem seems to be in the naming of the variable of the imported SVG, as it doesn't work if you use lowercase as its first character.

The moment I switched the variable names to PascalCase, the problems went away.

The thing that made it so confusing to me is that the example in the README uses lowercase.

[MKRhere]

That makes sense. I'll update the example and things should be fine :)

[c19]

Ha, interesting.We should probably allow lowercase import?

[MKRhere]

It is a Svelte convention that components should be Uppercased to differentiate from HTML tags