About

Design

Because svg path natively supports only a centered stroke, all the icons are designed in that way.

NPM Package

As most of my time is spent developing with React Native, I decided to start with a React Native package. It's a bit more challenging to use svgs in React Native than on web.

I noticed many React Native icon pack import the icons using their name:

import { ChevronRight, Home } from 'some-icon-pack';

const App = () => {
  return (
    <View>
      <ChevronRight />
      <Home />
    </View>
  );
};

I wanted to be able to simply import the pack and use any of its available icons:

import Snappy from 'react-native-snappy';

const App = () => {
  return (
    <View>
      <Snappy name='chevron-right' />
      <Snappy name='home' />
    </View>
  );
};

Both methods have their pluses and minuses. I chose the latter method because I believe it doesn't slow down development. Moreover, with that method you also get some perks for free. It allows for dynamic iteration through the icon pack:

import Snappy, { snappyNameArray } from 'react-native-snappy';

const App = () => {
  return (
    <View>
      {snappyNameArray.map((iconName) => (
        <Snappy name={iconName} />
      ))}
    </View>
  );
};

It also helps with TypeScript typing. All the icons live in a large object from which all the icon names can be dynamically extracted. This allows for a better app development experience when finding a particular icon:

Conclusion

I started drawing icons around November 2021. Whenever I had an idea for an icon, or just some time to relax, I opened up Figma and started drawing. I learn a lot about icon design, and finally created my first npm package.