🧹 [UI House Keeping] Icon

[georgewrmarshall]

Description

Ensure that Icon adheres to all of the following conventions and standards

• Ensure that the url for icon is being rendered correctly in the html
• Has a className prop and the PropType descriptions are all the same
• Prop table in MDX docs have the "Accepts all Box component props" description and link
• We are consistent when using the same prop names like size and are suggesting the use of the generalized design-system.js constants e.g. SIZES as the primary option but noting the component consts in the documentation and using them for propType validation and storybook controls only
• Standardize all similar prop names for images imgSrc, imgAlt(html element + attribute) (needs audit)
• We have a story for each component prop and we use the prop name verbatim e.g. size prop would be export const Size = (args) => (
• We have the accompanying documentation for each component prop and we use the prop name verbatim e.g. size prop would be ### Size
• Are multiple props stories allowed? e.g. Color, Background Color And Border Color story in base-avatar - [ ] yes when it makes sense to
• All Base components follow the suffix convention e.g. ButtonBase
• All Base component MDX documentation have the base component notification at the top
• Add mm- prefix to all classNames
• className is kebab case version of the component name
• Spread base components props and reduce duplication of props when props aren't being changed and remain the same for both variant and base components
• Add component to root index.js file in component-library
• Add locals for any default text I18nContext as default context
• Add any "to dos" with a // TODO: comment so we can search for them at a later date e.g. blocking components etc
• Add snapshot testing
• Add pixel values to propType descriptions if we use abstracted prop types that relate to pixel values e.g. SIZE.MD (32px)
• Each prop section in the MDX docs should have: a heading, a description, a story and an example code snipped

[garrettbear]

When doing your house keeping, let's also fix the closing tags of the Icon component.

https://github.com/MetaMask/metamask-extension/blob/develop/ui/components/component-library/icon/icon.js#L31

maskImage: `url('./images/icons/icon-${name}.svg')`,
WebkitMaskImage: `url('./images/icons/icon-${name}.svg')`,

FYI: This will break some snapshots.

[georgewrmarshall]

@garrettbear do you mean add the semi colon?