@parkable/icons v0.0.7

Parkable Icons

This is an icon library intended to be used alongside projects like the Web and Mobile. It exposes icons with preserved modules to enable tree shaking for the projects which consume this one.

The tsx files in this project are autogenerated. Because icons should be "dumb" these generated files should almost always be left as is. This is especially true because the icons are generated and can be overwritten easily.

Adding more icons

To add icons to the library, simply place an SVG file in the assets folder. Running yarn build will then transpile the SVG into it's corresponding tsx version. In short, the SVG becomes componentized, and can then be bundled with react code.

Updating an icon

The default settings mean .tsx icons are not overwritten by changes in the .svg files. As such, to update an icon, remove the existing .tsx file and run the build command again.

Consuming this library

Given this library is installed in your desired project, it's best to import icons from their individual files. This means only the icons we use are ultimately bundled with the code that gets sent to the client.

For example:

// Do this
import ArrowBoldDown from "@parkable/icons/dist/ArrowBoldDown";
// Not this
import { ArrowBoldDown } from "@parkable/icons";

Some bundlers effectively use tree shaking, meaning the second option is fine to use, but it is good to use the former approach to be sure.

###Fill and stroke colours Some SVGs will come with colours set, which can't be overridden. eg fill=#ab2485. If you remove these, then the colour can be set by <IconName fill='red'/>. You can do the same for stroke colour.

To-Do

The code generation is compatible with creating react native icons, but that is not yet configured in this project. Will be added down the track.