React component used to render SVG icons. Resources are exported raw, some type of svg loader is needed on application level
The "name" prop form is an svg filename. Icon with filenames ending with _s and _l will be
automatically assigned "small" (16px) and "large) (40px) sizes. Those without such ending strings
will be "medium" (24px) by default.
Icon could be wrapped into styled(), but right now we don't have control over the "fill" property, as Figma produces svg paths with hard-attached fills
However, for dynamic color we can remove the "fill" attribute from svg code, and wrap the icon with default styled component. Probably, even on ui kit level, but it could also be easily done on app level.
- Add an .svg file to ./assets
- Add an export to the ./iconsList.js
Auto-consuming svg assets with require.context is disabled due to complications with jest/webpack difference.
List of available Icons: TBD
interface Props {
name: string
size?: "small" | "medium" | "large"
className?: string
}