techygrrrl's blog

How I work with icons in cross-platform apps, including React apps on web and mobile apps on Android and iOS

How I work with icons in cross-platform apps, including React apps on web and mobile apps on Android and iOS

techygrrrl's photo
techygrrrl
·

2 min read

Table of contents

How?

I use Figma and Figma plugins to work with icons in my apps:

  • Import React-Icons is a Figma plugin that allows you to, well, import icons from the react-icons collection

  • Find on Page is a Figma plugin to easily find layers by name

These 2 plugins make my icons workflow easier.

Then I right click -> Copy as SVG and paste it into a new component:

/**
 * react-icons/bs/BsChevronCompactDown
 */
export const IconChevronDown = ({ size = 24 }) => {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fillRule="evenodd" clipRule="evenodd" d="M2.32948 10.164C2.4186 9.98658 2.57444 9.85173 2.76284 9.78902C2.95123 9.72632 3.15681 9.74088 3.33448 9.82951L12 14.16L20.664 9.82801C20.7521 9.78298 20.8483 9.75585 20.947 9.74817C21.0457 9.74049 21.1449 9.75242 21.239 9.78328C21.333 9.81413 21.42 9.86329 21.495 9.92793C21.5699 9.99257 21.6313 10.0714 21.6757 10.1599C21.72 10.2484 21.7464 10.3448 21.7533 10.4435C21.7603 10.5423 21.7476 10.6414 21.716 10.7352C21.6844 10.829 21.6346 10.9156 21.5693 10.9901C21.5041 11.0645 21.4248 11.1254 21.336 11.169L12.336 15.669C12.2317 15.7213 12.1166 15.7485 12 15.7485C11.8833 15.7485 11.7683 15.7213 11.664 15.669L2.66398 11.169C2.48655 11.0799 2.3517 10.9241 2.28899 10.7357C2.22629 10.5473 2.24085 10.3417 2.32948 10.164Z" fill="currentColor" />
    </svg>
  );
};

Here's what's going on:

  • there's a size prop that defaults to 24 since that's the default icon size. This can be scaled since it's SVG. size only impacts width and height attributes and not viewbox

  • be sure to replace all kebab-case attributes with their camelCase variants, i.e. fill-rule becomes fillRule

  • replace fill="black" with fill="currentColor" so it's as easy to customize as text, including different colours on hover states, etc.

  • I copy the layer name from Figma as-is so I know which collection it's from. This makes it easier to find later and I can browse similar icons nearby.

Why?

I could just find a library, but here are the reasons I didn't:

  • Cross-platform solution: I do native mobile and desktop app development too, not just web, so this approach works easily with wherever I need icons

  • No library to contribute to the bundle size

  • I can use any SVG icon I want, not limited by the icons available in the specific library. Some libraries are tedious to work with and are a bit confusing about what's available (e.g. Material Icons for Android). If a library doesn't have everything I need, I may need to use another library, and then I have 2 libraries where I'm only using a handful of icons from each.