Photo by Harpal Singh on Unsplash

The easiest way I know to replace icons in a React app

Magical D2C workflow

D2C — design-to-code

This is a workflow I enjoy tremendously when I design iconography.

I’m working on the tree structure for our design tools at Views. Here’s how it looks like to give you an idea of what’s what.

The workflow goes like this.

Let’s take the icon I made for a Horizontal block as an example.

It’s looks OK-ish. My goal was to show that the items inside of this type of container will be distributed on the horizontal axis.

Well, it could also signify stretching behaviour, so it’s not ideal. Let’s change it to something else.

I’ve done it in Illustrator and saved it as an SVG (Tiny 1.1 format) in the Svgs folder inside of my React project.

Adobe Illustrator saving options

Views Tools already generated a Views file and a React component for me

I open the StructureHorizontal.svg file in Illustrator (or Sketch) and change it to something else, ideally, something closer to distribution than to size.

New icon

Let’s say, that will do, so I save it.

Boom 💥 My icon becomes the part of the production build straight away.

OK. That’s that. My work is done. No Hand-off, no exports, no additional work for my dev team. It just works.

Here’s what’s going on in the background, after I make my changes:

1. I hit Save
2. Corresponding .view file is auto-generated (below)
3. Corresponding production quality React component is auto-generated and saved as .view.js file (below)
4. Since the name didn’t change, all the updates also happen automatically. If I would save it as a file with a different name, the same components would be automatically created, but I would have to go to the point of use and change the name to the new one, so it’s picked up and rendered.

Here’s the code for the reference.

In Views you decide if you want to design or code.

My new icon in Views language syntax gets auto-generated for me and saved as .view file

Production quality JavaScript (ReactJS) component is auto-generated for me and saved as .view.js file

Subscribe here to be notified when the Views Tools beta is out (summer 2018). Join our Slack team to meet the contributors. Follow me on Twitter not to miss news about new alternatives to the hand-off process. Also, clapping 👏 lets me know that you have enjoyed reading this post and allows others to see it too.