Last but not least, one of the most interesting techniques we can apply in the browser to draw icons and graphs is Scalable Vector Graphics (SVG).

SVG is great because it is a declarative way of describing vectors and it fits perfectly with the purposes of React.

We used to use icon fonts to create icons, but they have well-known problems, with the first being that they are not accessible. It is also pretty hard to position icon fonts with CSS, and they do not always look beautiful in all browsers. These are the reasons we should prefer SVG for our web applications.

From a React point of view, it does not make any difference if we output a div or an SVG element from the render method, and this is what makes it so powerful.

We tend also to choose SVGs because we can easily modify them at runtime using CSS and JavaScript, which makes them an excellent candidate for the functional approach of React.

So, if we think about our components as a function of their props, we can easily imagine how we can create self-contained SVG icons that we can manipulate by passing different props to them.

A common way to create SVGs in a web app with React is to wrap our vectors into a React component and use the props to define their dynamic values.

Let's look at a simple example where we draw a blue circle, thus creating a React component that wraps an SVG element:

  const Circle = ({ x, y, radius, fill }) => ( 
    <svg> 
      <circle cx={x} cy={y} r={radius} fill={fill} /> 
    </svg> 
  );

As you can see, we can easily use a stateless functional component that wraps the SVG markup, and it accepts the same props as the SVG does.

So, the SVG is just a template, and we can use the same Circle multiple times in our application with various props.

The props are defined in the following way:

  import { number, string } from 'prop-types';
  ...
  Circle.propTypes = { 
    x: number, 
    y: number, 
    radius: number, 
    fill: string 
  };

This is great because it makes working with SVGs and their properties more explicit so that the interface is clear and we know exactly how to configure our icons.

An example usage is as follows:

  <Circle x={20} y={20} radius={20} fill="blue" /> 

We can obviously use the full power of React and set some default parameters so that, if the Circle icon is rendered without props, we still show something.

For example, we can define the default color:

  Circle.defaultProps = { 
    fill: 'red'
  };

This is pretty powerful when we build UIs, especially in a team where we share our icon set and we want to have some default values in it, but we also want to let other teams decide their settings without having to recreate the same SVG shapes.

However, in some cases, we prefer to be more strict and fix some values to keep consistency. With React, this is a super simple task.

For example, we can wrap the base circle component into a RedCircle, as follows:

  const RedCircle = ({ x, y, radius }) => ( 
    <Circle x={x} y={y} radius={radius} fill="red" /> 
  );

Here, the color is set by default and it cannot be changed, while the other props are transparently passed to the original circle.

The prop types are the same without the fill:

  RedCircle.propTypes = { 
    x: number, 
    y: number, 
    radius: number
  };

The following screenshot shows two circles, blue and red, that are generated by React using SVG:

We can apply this technique and create different variations of the circle, such as SmallCircle and RightCircle, and everything else we need to build our UIs.