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

Magical D2C workflow

Tom Parandyk
Aug 24, 2018 · 3 min read

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.

Views Tools

Find product market fit before you run out of money

Tom Parandyk

Written by

My goal is to simplify software development so that more people who find it hard to break into technology space have a chance for success. #techforall

Views Tools

Find product market fit before you run out of money

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade