How to debug icons from icons.json not loading?

[acederberg]

Hi!

I am wondering what features of svg iconify does and does not support. I am trying to make kubernetes community svgs into something I can use with iconify for mermaid.js. I am totally lost on why this is not working and what it is that I am doing wrong, any help is really appreciated.

kubernetes.json

{
  "icons": {
    "svc": {
      "height": 512,
      "width": 512,
      "body": "<g inkscape:label=\"Calque 1\" inkscape:groupmode=\"layer\" id=\"layer1\" transform=\"translate(-0.99262638,-1.174181)\">\n    <g id=\"g70\" transform=\"matrix(1.0148887,0,0,1.0148887,16.902146,-2.698726)\">\n      <path inkscape:export-ydpi=\"250.55\" inkscape:export-xdpi=\"250.55\" inkscape:export-filename=\"new.png\" inkscape:connector-curvature=\"0\" id=\"path3055\" d=\"m -6.8492015,4.2724668 a 1.1191255,1.1099671 0 0 0 -0.4288818,0.1085303 l -5.8524037,2.7963394 a 1.1191255,1.1099671 0 0 0 -0.605524,0.7529759 l -1.443828,6.2812846 a 1.1191255,1.1099671 0 0 0 0.151943,0.851028 1.1191255,1.1099671 0 0 0 0.06362,0.08832 l 4.0508,5.036555 a 1.1191255,1.1099671 0 0 0 0.874979,0.417654 l 6.4961011,-0.0015 a 1.1191255,1.1099671 0 0 0 0.8749788,-0.416906 L 1.3818872,15.149453 A 1.1191255,1.1099671 0 0 0 1.5981986,14.210104 L 0.15212657,7.9288154 A 1.1191255,1.1099671 0 0 0 -0.45339794,7.1758396 L -6.3065496,4.3809971 A 1.1191255,1.1099671 0 0 0 -6.8492015,4.2724668 Z\" style=\"fill:#326ce5;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\"/>\n      <path id=\"path3054-2-9\" d=\"M -6.8523435,3.8176372 A 1.1814304,1.171762 0 0 0 -7.3044284,3.932904 l -6.1787426,2.9512758 a 1.1814304,1.171762 0 0 0 -0.639206,0.794891 l -1.523915,6.6308282 a 1.1814304,1.171762 0 0 0 0.160175,0.89893 1.1814304,1.171762 0 0 0 0.06736,0.09281 l 4.276094,5.317236 a 1.1814304,1.171762 0 0 0 0.92363,0.440858 l 6.8576188,-0.0015 a 1.1814304,1.171762 0 0 0 0.9236308,-0.44011 l 4.2745966,-5.317985 a 1.1814304,1.171762 0 0 0 0.228288,-0.990993 L 0.53894439,7.6775738 A 1.1814304,1.171762 0 0 0 -0.10026101,6.8834313 L -6.2790037,3.9321555 A 1.1814304,1.171762 0 0 0 -6.8523435,3.8176372 Z m 0.00299,0.4550789 a 1.1191255,1.1099671 0 0 1 0.5426517,0.1085303 l 5.85315169,2.7948425 A 1.1191255,1.1099671 0 0 1 0.15197811,7.9290648 L 1.598051,14.21035 a 1.1191255,1.1099671 0 0 1 -0.2163123,0.939348 l -4.0493032,5.037304 a 1.1191255,1.1099671 0 0 1 -0.8749789,0.416906 l -6.4961006,0.0015 a 1.1191255,1.1099671 0 0 1 -0.874979,-0.417652 l -4.0508,-5.036554 a 1.1191255,1.1099671 0 0 1 -0.06362,-0.08832 1.1191255,1.1099671 0 0 1 -0.151942,-0.851028 l 1.443827,-6.2812853 a 1.1191255,1.1099671 0 0 1 0.605524,-0.7529758 l 5.8524036,-2.7963395 a 1.1191255,1.1099671 0 0 1 0.4288819,-0.1085303 z\" style=\"color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:Sans;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;marker:none;enable-background:accumulate\" text-anchor=\"start\" inkscape:connector-curvature=\"0\"/>\n    </g>\n    <text id=\"text2066\" y=\"16.811775\" x=\"9.9799767\" style=\"font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:6.61458349px;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1\" xml:space=\"preserve\"><tspan style=\"font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222223px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';text-align:center;writing-mode:lr-tb;fill:#ffffff;fill-opacity:1;stroke-width:0.26458332px\" text-anchor=\"middle\" y=\"16.811775\" x=\"9.9799767\" id=\"tspan2064\" sodipodi:role=\"line\">svc</tspan></text>\n    <g id=\"g3345\" transform=\"translate(0.09238801,0)\">\n      <path style=\"fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:0.26458332;stroke-linecap:square;stroke-miterlimit:10\" inkscape:connector-curvature=\"0\" d=\"m 4.4949896,11.260826 2.9083311,0 0,2.041667 -2.9083311,0 z\" id=\"path964\"/>\n      <path style=\"fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:0.26458332;stroke-linecap:square;stroke-miterlimit:10\" inkscape:connector-curvature=\"0\" d=\"m 8.4637407,11.260826 2.9083303,0 0,2.041667 -2.9083303,0 z\" id=\"path966\"/>\n      <path style=\"fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:0.26458332;stroke-linecap:square;stroke-miterlimit:10\" inkscape:connector-curvature=\"0\" d=\"m 12.432491,11.260826 2.90833,0 0,2.041667 -2.90833,0 z\" id=\"path968\"/>\n      <path style=\"fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:0.26458332;stroke-linecap:square;stroke-miterlimit:10\" inkscape:connector-curvature=\"0\" d=\"m 7.6137407,5.2082921 4.6083303,0 0,2.041667 -4.6083303,0 z\" id=\"path970\"/>\n      <path style=\"fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:0.52916664;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1\" inkscape:connector-curvature=\"0\" d=\"m 9.9179005,7.2499601 0,2.005449 -3.966671,0 0,2.0028859\" id=\"path978\"/>\n      <path style=\"fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:0.52899998;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1\" inkscape:connector-curvature=\"0\" d=\"m 9.9179005,7.2499601 0,2.005449 3.9666705,0 0,2.0028859\" id=\"path986\"/>\n      <path style=\"fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:0.52916664;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1\" inkscape:connector-curvature=\"0\" d=\"m 9.9095538,7.2512251 0,2.005449 0.0167,0 0,2.0028859\" id=\"path982\"/>\n    </g>\n  </g>"
    }
  },
  "prefix": "k8s"
}

test.json

{
  "icons": {
    "adobe-animate": {
      "body": "<rect width=\"256\" height=\"249.6\" fill=\"#00005B\" rx=\"42.5\"/><path fill=\"#99F\" d=\"M103.513 149.333h-39.67l-8.148 25.033a2.02 2.02 0 0 1-1.9 1.546H33.542q-1.72 0-1.202-1.89l34.49-98.42l.457-1.353c.191-.573.382-1.182.573-1.914c.45-2.291.68-4.62.687-6.955a1.063 1.063 0 0 1 1.202-1.202h27.305q1.2 0 1.374.859l38.84 109.157q.515 1.718-1.03 1.717h-22.325a1.59 1.59 0 0 1-1.718-1.202zm-33.42-21.181h27.133l-.386-1.277l-.622-2.022l-.908-2.896l-1.745-5.467l-4.754-15.043a334 334 0 0 1-2.46-8.138l-.878-3.096l-.72-2.567l-.885-3.21l-.209-.763h-.171a139 139 0 0 1-3.137 12.23l-1.16 3.723l-2.79 9l-1.797 5.82l-.763 2.427l-.758 2.37l-.754 2.313a374 374 0 0 1-2.237 6.596m79.197 46.125v-63.299q.001-.648-.004-1.33l-.012-1.4l-.021-1.467l-.048-2.328l-.057-2.033a255 255 0 0 0-.11-2.944l-.09-1.893l-.13-2.348l-.108-1.72l-.064-.878l-.042-.508a1.02 1.02 0 0 1 .171-1.03a1.4 1.4 0 0 1 1.031-.343h17.143a3.84 3.84 0 0 1 1.718.343c.463.239.782.687.858 1.202l.773 2.319a17.6 17.6 0 0 1 .601 3.478a34.5 34.5 0 0 1 11.334-6.611a39 39 0 0 1 12.88-2.147a32.7 32.7 0 0 1 10.047 1.632a25.38 25.38 0 0 1 16.229 15.8c1.717 4.408 2.39 10.104 2.39 17.086v50.419q0 1.545-1.374 1.545L202.34 176a1.517 1.517 0 0 1-1.718-1.717v-47.836a23.7 23.7 0 0 0-2.073-9.286a12.27 12.27 0 0 0-4.38-5.324a12.9 12.9 0 0 0-7.298-1.889c-2.76-.04-5.5.457-8.071 1.46a20.4 20.4 0 0 0-6.354 4.035v58.834q0 1.545-1.374 1.545h-20.235a1.366 1.366 0 0 1-1.546-1.545\"/>",
      "height": 250
    }
  },
  "prefix": "logos"
}

index.html

<html>
<body>
  <h1>Using Iconify</h1>
  <h2>Adobe</h2>
  <span class="iconify" data-icon="logos:adobe-animate"></span>
  <h2>Kube Service</h2>
  <span class="iconify" data-icon="k8s:svc"></span>
  <script src="https://code.iconify.design/3/3.0.0/iconify.min.js"></script>
  <script type="module">
    fetch('/test.json')
      .then(response => response.json())
      .then(data => {
        Iconify.addCollection(data);
      });
    fetch('/kubernetes.json')
      .then(response => response.json())
      .then(data => {
        Iconify.addCollection(data);
      });
  </script>
</body>
</html>

[Mahmud0808]

Hi there,
It looks like you're on the wrong Iconify repository. The one you're looking for is here: iconify/iconify. Apologies for the naming confusion.