Migrate SVG icon files to Chakra

[TylerAPfledderer]

To be inline with the UI migration #6374, there is a collection of SVG assets that serve as icons that can also be converted to Chakra!

Aside from the approach to use the Icon component, which is good for use with icons from 3rd party packages, there is the createIcon() function which allows you to build the svg parts and supercharge the icon itself with Chakra props. The icon can then be imported into another part of the project as a Chakra component to be styled directly.

This can cut down on, say, the need to use descendant selecting in CSS to be able to alter any styling.

Note: using createIcon() over the Icon component is a semantic choice. From the Chakra docs, it states that "[This] function is a convenience wrapper around the process of generating icons with 'Icon', allowing you to achieve the same functionality with less effort."

I personally find createIcon() to be cleaner for this use! 😅

Current Behavior

For example, the current approach is to import an svg as a react component via gatsby-plugin-react-svg as the following:

import HardwareSupport from "../../../assets/wallets/hardware_support.svg"

Now if the fill or any other styling of the svg element were need to be altered, you would use a descendant selector in the parent component

// Using Chakra's `Box` component

<Box
  sx={{
    svg: {
      boxSize: 7,
      mt: 2,
      path: {
        fill: "text",
      },
    },
  }}
>
  <HardwareSupport />
</Box>

New Behavior

With createIcon() for hardware_support.svg:

// Note the use of `fill="currentColor"` compared to the original

export const HardwareSupportIcon = createIcon({
  displayName: "HardwarSupportIcon",
  viewBox: "0 0 256 256",
  path: [
    <path
      d="M99.0003 42C100.415 42 101.772 42.5621 102.773 43.5626L130.913 71.7034C132.997 73.7869 132.997 77.1648 130.913 79.2483C128.83 81.3317 125.452 81.3317 123.368 79.2482L104.335 60.2149V107.786C104.335 110.732 101.947 113.121 99.0003 113.121C96.0538 113.121 93.6653 110.732 93.6653 107.786V60.2148L74.6318 79.2483C72.5484 81.3317 69.1704 81.3317 67.087 79.2483C65.0036 77.1648 65.0036 73.7869 67.087 71.7034L95.2278 43.5626C96.2283 42.5621 97.5853 42 99.0003 42Z"
      fill="currentColor"
    />,
    <path
      d="M169 48.0001C171.947 48.0001 174.335 50.3887 174.335 53.3351V100.906L193.368 81.8726C195.452 79.7891 198.83 79.7891 200.913 81.8726C202.997 83.956 202.997 87.3339 200.913 89.4174L172.773 117.558C171.772 118.559 170.415 119.121 169 119.121C167.585 119.121 166.228 118.559 165.228 117.558L137.087 89.4174C135.004 87.334 135.004 83.956 137.087 81.8726C139.17 79.7891 142.548 79.7891 144.632 81.8726L163.665 100.906V53.3351C163.665 50.3887 166.054 48.0001 169 48.0001Z"
      fill="currentColor"
    />,
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M70.6984 205.951C68.1036 205.951 66 203.857 66 201.274V178.387C66 175.804 68.1035 173.71 70.6984 173.71H86.0249V167.067H126.725L109.176 136.809C107.878 134.572 108.648 131.711 110.895 130.42L143.01 111.963C145.258 110.671 148.131 111.437 149.429 113.675L186.883 178.251C193.3 189.316 189.492 203.465 178.376 209.853C176.874 210.717 175.316 211.394 173.728 211.892C171.207 212.825 168.479 213.335 165.631 213.335H86.0249V205.951H70.6984ZM73.9135 181.588H86.0249V198.074H73.9135V181.588ZM165.631 167.067C167.739 167.067 169.782 167.346 171.724 167.87L144.183 120.385L117.637 135.642L135.863 167.067H165.631Z"
      fill="currentColor"
    />,
  ],
})

The original example can now become:

import { HardwareSupportIcon } from "../../../components/icons/wallets/HardwareSupportIcon"

// Or exported through a common `index.ts` for each sub-directory
import { HardwareSupportIcon } from "../../../components/icons/wallets"

<Box>
  <HardwareSupportIcon color="text" boxSize={ 7 } mt={ 2 }  />
</Box>

Setup

As this is arguably a major overhaul, the following are proposed outlined steps to be taken:

1. Identify all svg icons from the assets directory
2. Convert each icon to a .tsx file with Chakra's createIcon() function, save the new files into src/components/icons, and divided here in the same sub-directory structure present in assets. Also, they would be given a new naming convention of [Name]Icon.tsx

• i.e. hardware_support.svg currently resides in src/assets/wallets/hardware_support.svg. Its name and location would now become src/components/icons/wallets/HardwareSupportIcon.tsx

3. Convert the icon imports in all components and pages.
   3a. Adjust implementation as necessary.

Additional Thoughts

One known expected result in this conversion is the loss of SVG image previews via an IDE extension, and a solid replacement was not found. However, with the current consideration of bringing in StorybookJS to the workflow a story could be created to display all of the icons.

[TylerAPfledderer]

Request for self-assignment of this, please and thank you! 😄

[corwintines]

Strongly agree with this idea. This was a similar approach to what we took when working on the geth website and thought it was a good pattern.

I don't think the loss of that svg preview is the end of the world, but we could always start with the pattern of keeping both the svg and icon implementation to start, with the intent of removing the svg files once storybook has been implemented.