Htykuut

I have an array called iconImportList that looks like this:

[

  {

    url: "../src/icons/icn-check.svg",

    name: "Check"

  },

  {

    url: "../src/icons/icn-x.svg",

    name: "Close"

  }

]

I'm trying to dynamically import the icons so I can use them in various ways (mainly to display them in a list and allow them to be downloaded). I've installed the experimental import() and all that.

I'm doing this:

iconImportList.map(icon => {

  import(icon.url).then(importedIcon => {

      iconDownloadList.push(importedIcon)

    })

    .catch(error => {

      console.log('Error trying to import icon!')

      console.log(error)

    })

})

Which gives me these errors in console:

Error trying to import icon!

index.js:56 Error: Cannot find module '../src/icons/icn-check.svg'

    at VM254 iframe.bundle.js:75725

index.js:55 Error trying to import icon!

index.js:56 Error: Cannot find module '../src/icons/icn-x.svg'

    at VM254 iframe.bundle.js:75725

But I know those are the correct paths because if I do this (copying the cannot find module path from the error log):

import testIcon from '../src/icons/icn-check.svg'

console.log('testIcon: ' + testIcon)

The console logs:

testIcon: static/media/icn-check.20a4c1d4.svg

And I can access the icon file via localhost browser. Anything obvious that I'm doing wrong?