I've created two components called HomeIcon.tsx and SearchIcon.tsx. Every component returns the svg for it's respective icon. To get the icon. Visit the Figma Icon-library, right-click the icon, choose Copy as SVG.
the /icons folder contains this
colors.ts: Exports an object that tells each name what color value it should have
icons.d.ts: The type file for the icons props. If we enable each icon to accept more props. We'll need to update those props here
index.ts: We'll update this file everytime we create a new component. We export every component from this file. Since every component is exported by name, this then allows us to import every component nicely from the @icons alias.
I've created two components called
HomeIcon.tsxandSearchIcon.tsx. Every component returns the svg for it's respective icon. To get the icon. Visit the Figma Icon-library, right-click the icon, choose Copy as SVG.the
/iconsfolder contains thiscolors.ts:Exports an object that tells each name what color value it should haveicons.d.ts:The type file for the icons props. If we enable each icon to accept more props. We'll need to update those props hereindex.ts:We'll update this file everytime we create a new component. We export every component from this file. Since every component is exported by name, this then allows us to import every component nicely from the@iconsalias.import { HomeIcon, SearchIcon } from '@/icons'