Planet FAQs with dynamic asset importing

This challenge required me to learn about SVG importing and dynamically displaying SVG’s that are various sizes. While it is rather straight forward to import individual assets in a React project, this is a more difficult task when you have many assets. This is further compounded when you want to dynamically use said assets. I ended up with a couple of very useful hooks and a reusable SVG component that provided a more elegant solution. The result was much more reusable and easier to implement.

Also, in this project I modified the data.json file to add planet colors and SVG base sizes to aid in dynamically changing theme colors and correctly sizing planet graphics.

function importAll(r) {
  let images = {}
  r.keys().map((item) => {
    images[item.replace('./', '')] = r(item)
  })
  return images
}

export const images = importAll(
  require.context('../assets', true, /\.(png|jpe?g|svg)$/)
)

import { useRef } from 'react'

export default function useDynamicSVGImport(name) {
  const ImportedIconRef = useRef()
  ImportedIconRef.current = name

  return { SvgIcon: ImportedIconRef.current }
}

export default function Svg({ name, onCompleted, onError, ...rest }) {
  const { SvgIcon } = useDynamicSVGImport(name)

  if (SvgIcon) {
    return <SvgIcon {...rest} />
  }
  return null
}