0

import { userInterfaceIcons } from "../assets/icons/icons-list";

I have a bunch of svgs in an array, here is an example of one:

  {
    name: '0+',
    data: `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 4.99978H19V5.99978C19 6.26499 19.1054 6.51935 19.2929 6.70688C19.4804 6.89442 19.7348 6.99978 20 6.99978C20.2652 6.99978 20.5196 6.89442 20.7071 6.70688C20.8946 6.51935 21 6.26499 21 5.99978V4.99978H22C22.2652 4.99978 22.5196 4.89442 22.7071 4.70689C22.8946 4.51935 23 4.265 23 3.99978C23 3.73456 22.8946 3.48021 22.7071 3.29267C22.5196 3.10514 22.2652 2.99978 22 2.99978H21V1.99978C21 1.73456 20.8946 1.48021 20.7071 1.29267C20.5196 1.10514 20.2652 0.999778 20 0.999778C19.7348 0.999778 19.4804 1.10514 19.2929 1.29267C19.1054 1.48021 19 1.73456 19 1.99978V2.99978H18C17.7348 2.99978 17.4804 3.10514 17.2929 3.29267C17.1054 3.48021 17 3.73456 17 3.99978C17 4.265 17.1054 4.51935 17.2929 4.70689C17.4804 4.89442 17.7348 4.99978 18 4.99978ZM12.5 5.99978H11.5C10.7044 5.99978 9.94129 6.31585 9.37868 6.87846C8.81607 7.44107 8.5 8.20413 8.5 8.99978V14.9998C8.5 15.7954 8.81607 16.5585 9.37868 17.1211C9.94129 17.6837 10.7044 17.9998 11.5 17.9998H12.5C13.2957 17.9998 14.0587 17.6837 14.6213 17.1211C15.1839 16.5585 15.5 15.7954 15.5 14.9998V8.99978C15.5 8.20413 15.1839 7.44107 14.6213 6.87846C14.0587 6.31585 13.2957 5.99978 12.5 5.99978ZM13.5 14.9998C13.5 15.265 13.3946 15.5193 13.2071 15.7069C13.0196 15.8944 12.7652 15.9998 12.5 15.9998H11.5C11.2348 15.9998 10.9804 15.8944 10.7929 15.7069C10.6054 15.5193 10.5 15.265 10.5 14.9998V8.99978C10.5 8.73456 10.6054 8.48021 10.7929 8.29267C10.9804 8.10514 11.2348 7.99978 11.5 7.99978H12.5C12.7652 7.99978 13.0196 8.10514 13.2071 8.29267C13.3946 8.48021 13.5 8.73456 13.5 8.99978V14.9998ZM21.6 8.99978C21.4713 9.02602 21.349 9.07736 21.2402 9.15087C21.1313 9.22438 21.038 9.31861 20.9656 9.42819C20.8931 9.53777 20.843 9.66055 20.818 9.78951C20.793 9.91846 20.7937 10.0511 20.82 10.1798C21.2104 12.076 20.979 14.0475 20.1601 15.8018C19.3412 17.5561 17.9785 18.9995 16.2741 19.9178C14.5698 20.8362 12.6148 21.1805 10.6993 20.8996C8.78381 20.6188 7.00992 19.7278 5.64097 18.3588C4.27202 16.9899 3.38099 15.216 3.10014 13.3005C2.81929 11.385 3.16359 9.42995 4.08194 7.72564C5.00028 6.02133 6.44372 4.65858 8.19798 3.83966C9.95224 3.02075 11.9238 2.78934 13.82 3.17978C14.0852 3.23282 14.3606 3.17834 14.5857 3.02831C14.8107 2.87828 14.967 2.64499 15.02 2.37978C15.073 2.11456 15.0186 1.83914 14.8685 1.61409C14.7185 1.38905 14.4852 1.23282 14.22 1.17978C13.4882 1.04343 12.7442 0.983109 12 0.999778C9.82441 0.999778 7.69767 1.64492 5.88873 2.85361C4.07979 4.06231 2.66989 5.78027 1.83733 7.79026C1.00477 9.80025 0.786929 12.012 1.21137 14.1458C1.6358 16.2796 2.68345 18.2396 4.22183 19.778C5.76021 21.3163 7.72022 22.364 9.85401 22.7884C11.9878 23.2129 14.1995 22.995 16.2095 22.1625C18.2195 21.3299 19.9375 19.92 21.1462 18.1111C22.3549 16.3021 23 14.1754 23 11.9998C23.0021 11.2608 22.9284 10.5237 22.78 9.79978C22.7561 9.66927 22.7064 9.54484 22.6338 9.43373C22.5613 9.32261 22.4674 9.22705 22.3576 9.15259C22.2478 9.07813 22.1242 9.02627 21.9942 9.00004C21.8641 8.9738 21.7301 8.97372 21.6 8.99978Z" />
          `,
  },

I am trying to find a way to iterate over all of these svgs in their respective objects, but Chrome keeps blocking them. Here is the latest thing I tried:

<div className="link-list">
    {
    userInterfaceIcons.map((icon, i) => {
        return(
            <a
                className="link-item"
                key={i}
            >
         
                <img src={icon.data} alt={icon.name} />
                <span>
                <strong>{icon.name}</strong>
                Easy setup for TypeScript, SCSS and more.
                </span>
            </a>
        )
    })
    }

{

But in the network tab, Chrome blocks each one. If I add them all as svg files in the same local assets folder, and import each one into my .mdx file it works fine.

Basically, it has no issue displaying svg files, but it won't display the svg when the svg is a part of an object as a value (where "data" is the key, in this case).

But I have hundreds of these I need to display, and was hoping to loop over each one, rather than creating hundreds of divs and exporting/importing each svg file.

vldmrrdjcc
  • 2,082
  • 5
  • 22
  • 41
Khepf
  • 352
  • 1
  • 4
  • 24
  • Are you sure is Angular and not React? In Angular you don't write "code" inside a .html (well you can use a few calls to function or a simple interpolation but sure "map" it's not allowed. – Eliseo Jun 22 '22 at 21:46
  • It's an mdx file in storybook, which is based on React. – Khepf Jun 23 '22 at 00:58
  • I guess I just don't understand why I need to import 1000 svgs into my mdx file, and clumsily create my own array of names that match the names of the svg imports, just so I can iterate over them and not have to create 1000 of the same component just to display them. As opposed to having 1000 svgs as values of objects, in an array, that can be easily iterated over. – Khepf Jun 23 '22 at 12:11
  • For anyone interested, for now, I just created individual files for each svg in an assets folder, imported each one, created an array with variable names that match the import names, and was able to iterate over the array to populate the svgs and their names in the mdx file. There has to be a better way, but this is as DRY as I was able to make it for the time being. If I come up with a better way than this, I'll post it here. – Khepf Jun 23 '22 at 17:48

0 Answers0