Published in


React — build SVG components with styled components

I worked with a project and we used SVG for icons. SVG is called Scalable Vector Graphics and it provides a lot of benefits as an image type/extension, it is scalable and the size is very small comparing to png and other image type.

There are a few ways to use the SVG in react:

  • Use it as a regular image (<img src="/images/logo.svg" />)
  • Include it directly as JSX

The project chose the third approach and I will share my learning in here.

Icon based component

import styled from 'styled-components';export interface IconProps {
className?: string;
export default styled.svg.attrs({
version: '1.1',
xmlns: '',
xmlnsXlink: '',
width: 52px;
height: 52px;
  • created based component with the svg attributes and default css style (width and height) which is optional

Twitter Icon component

import Svg, { IconProps } from './Icon';const TwitterIcon = (props: IconProps) => {
const { className } = props;
return (
<Svg viewBox="0 0 52 52" className={className}>
<path fill="currentColor" d="M42 xxxxxx 16.0777Z" />
export default TwitterIcon;
  • created the TwitterIcon component to return the SVG content

Then we can override the component style in this way

const StyledTwitterIcon = styled(TwitterIcon)`
width: 35px;
height: 35px;




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store