<p>Published on <a href="https://blog.prototypr.io/svg-illustrations-as-react-components-f0e7be304eb6?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Miuki Miu <img alt="" src="https://cdn-images-1.medium.com/max/1000/1*Vde6Uw1zsai3i8YOhVChzg.gif"></p>
<p>As a UI Designer &amp; Developer, my illustration skills are not the best. So, when I have to create illustrations for products, I always try to make them simple, reusable and able to cover different scenarios.</p>
<p>Like an alert component that can have a warning, danger and success state, an illustration can have them too. Transforming an SVG on a React Component, I can manipulate the markup and create different states. I can split the SVG markup into several components and reuse parts of it. I can pass props to control sizes, colours and adapt them to different scenarios.</p>
<p>This article explains how I built, React Kawaii, an open source library of SVG illustrations that can be easily customisable.</p>
<p>Hopefully, this article can help you build your own library!</p>
<h3>1. The idea</h3>
<p><strong>Kawaii</strong> is a Japanese word, best translated as “cute”. It is known as one of the cutest forms of art in the world. Kawaii, can be an illustration of a cupcake or an apple with a happy face.</p>
<p>Almost anything can be Kawaii if we put a cute face on it. That’s why this type of illustration works well for web products. For instance, to a 404 error page, an icon of a planet with a sad face works well. When a user sends a message successfully, a happy icon can appear. An empty state for a Fintech product can be a coin with a face on it. The possibility of creating Kawaii illustration are endless.</p>
<p>Bearing this in mind, this type of illustration seemed perfect to transform into components.</p>
<h3>2. From SVG to JSX</h3>
<p>Having the idea defined, I created three illustrations on Sketch: a planet, a browser and an ice cream. Then I exported as SVGs, using a plugin for Sketch called <a href="https://github.com/BohemianCoding/svgo-compressor">svgo-compressor</a>.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*6UnWqkMauAuRI4pq-a86aw.png"></p>
<p>After that, I transformed the exported SVGs in JSX, and I started splitting the code into components. There’s a cool <a href="http://svg2jsx.herokuapp.com/">website</a> where we can paste our code and convert it on JSX.</p>
<h3>3. Common components</h3>
<p>After having all the SVGs transformed in JSX it was time to define the common components. What all of them have in common? What can I reuse between the three illustrations?</p>
<p>One of the things are the faces. All of the illustrations have them. So one of the common components is the Face Component. It receives a prop called mood that is limited to specific values: sad, shocked, happy, blissful and lovestruck.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/873/1*FFb-XcGfb5f5a3w7xK7PiA@2x.png"></p>
<p>In the Face component, there are different eyes and mouths. All these elements are inside if statements. If the prop received is sad, only the elements inside the “if sad statement is true” are loaded. The same applies to the rest of the moods.</p>
<p><iframe width="0" height="0" frameborder="0"><a href="https://medium.com/media/99987097687e9e9e6e3ddb7c57d80b25/href">https://medium.com/media/99987097687e9e9e6e3ddb7c57d80b25/href</a></iframe></p>
<p>The KawaiiElementWrapper is another common component. It’s a wrapper for all the illustrations. It is also where the animations live and common styles.</p>
<p>The SpeechBubble is another component shared between all the illustrations.</p>
<h3>4. Kawaii Component</h3>
<p>The Kawaii Component is the final exported SVG illustration with the common components there. For each of them, I removed the part of the SVG where the face was and replaced it with the component Face. This way I gained the ability to decide which mood I want to display.</p>
<p>I also replaced some attributes values by props. For instance, the fill value is replaced by the props colour.</p>
<p><iframe width="0" height="0" frameborder="0"><a href="https://medium.com/media/e3224e2e6e05e065648b65b15a93e584/href">https://medium.com/media/e3224e2e6e05e065648b65b15a93e584/href</a></iframe></p>
<h3>5. Calling the components</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*I4FbZLb8u2sxopOJC_qnLA@2x.png"></p>
<p>All the components can be imported from the react-kawaii library. Each component can receive different props: size, colour, mood and text.</p>
<p><iframe width="0" height="0" frameborder="0"><a href="https://medium.com/media/64a4a8309044f5185a238b0611f9dc3f/href">https://medium.com/media/64a4a8309044f5185a238b0611f9dc3f/href</a></iframe></p>
<p>You can find the complete project on <a href="https://github.com/miukimiu/react-kawaii">GitHub</a> and you can install it from NPM. It’s open source, and you can use it the way you want it.</p>
<pre>npm install --save-dev react-kawaii</pre>
<h3>The end!</h3>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=f0e7be304eb6" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/svg-illustrations-as-react-components-f0e7be304eb6">SVG illustrations as React Components</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


SVG illustrations as React Components

Top Stories