Create Component from SVG

Transform SVGs into React Native component.

What is SVG?

SVG stands for Scalable Vector Graphics and is vector-based graphics in XML format. Every element and every attribute in SVG files can be animated.

A common example of an SVG being used is logo.svg ,which is simply the React logo, generated by create-react-native-app.

A lot of time as a react-native developer, we have to deal SVG file to create image or icons. In fact, converting an SVG to a react component is quite simple. All we have to do is import SVG file and create react component that renders an SVG files. react-native-svg-transformer will be a good starting point if you are interested.

However, I personally don’t like this way of creating svg component because then I also have to manage *.svg files in my project. I would rather create my own customizable react component where I have the svg source code and can easily modify its attributes.

Introducing ‘react-native-svg’

I highly recommend using react-native-svg, which provides more features than I need. It has great documentation and very easy to use. Among many features and patterns, I would like to share few of my favorites.

Type 1: Svg (default)

import React from 'react';
import { G, Path, Svg } from 'react-native-svg';
export const QRCodeIcon = (props) => {
  const { size, width, height } = props;
  return (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      width={size ? size : width}
      height={size ? size : height}
      viewBox="0 0 24 24">
      <G
        fill="none"
        stroke="#09294D"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
      >
        <Path d="M1 5L1 1 5 1M5 23L1 23 1 19M19 1L23 1 23 5M23 19L23 23 19 23M5 5L5 9 9 9 9 5zM12 12L12 10 14 10M9 5L12 5 12 7M15 12L17 12 17 14M14 19L9 19M16 16L14 16 14 15 12 15M5 15L5 19 9 19 9 15zM15 5L15 9 19 9 19 5zM17 19L19 19 19 15M19 11L19 8M5 9L5 12M8 12L10 12" />
      </G>
   </Svg>);
};
QRCodeIcon.defaultProps = {
  width: 36,
  height: 36,
  size: 24,
};

Type 2: SvgXml

import React from 'react';
import { SvgXml } from 'react-native-svg';
export const CategoryIcon = (props) => {
  const { size, width, height, svg} = props;
  return (
    <SvgXml
      xml={svg}
      width={size ? size : width}
      height={size ? size : height}
    />
  );
};
CategoryIcon.defaultProps = {
  width: 80,
  height: 80,
  size: null,
};

Type 3: SvgCss

If xml string contains CSS in <style> element, use SvgCss:

import React from 'react';
import { SvgCss } from 'react-native-svg';
export const BurgerIcon = (props) => {
  const { size, width, height } = props;
  const xml = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="14" viewBox="0 0 20 14"><defs><style>.a{fill:#0a2a4e;}</style></defs><rect class="a" width="20" height="2" rx="1"/><rect class="a" width="20" height="2" rx="1" transform="translate(0 6)"/><rect class="a" width="20" height="2" rx="1" transform="translate(0 12)"/></svg>`;
  return (
    <SvgCss 
      xml={xml} 
      width={size ? size : width} 
      height={size ? size : height}
    />
  );
};
BurgerIcon.defaultProps = {
  width: 36,
  height: 36,
  size: null,
};

You can also add more attributes such as background-color, text-color, and etc. That’s it! Now you can use this as a react component.

reference

react-native-community/react-native-svg

SVG Tutorial