React SVG Icon

Save code like a react component

You start by copying the icon to its own component file. As per the icon below

// file IconSearch.tsx
import * as React from "react";

function IconSearch(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      fill="currentColor"
      viewBox="0 0 16 16"
      height="1em"
      width="1em"
      {...props}
    >
      <path d="M11.742 10.344a6.5 6.5 0 10-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 001.415-1.414l-3.85-3.85a1.007 1.007 0 00-.115-.1zM12 6.5a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z" />
    </svg>
  );
}

export default IconSearch;

Use like a svg component

Then you can render them directly

import React from 'react'
import IconSearch from './IconSearch'

export const MyComponent = () => {

  return (
    <div className='flex items-center'>
      <IconSearch className="text-red-700" width='48px' height='16px' />
      <IconSearch className="text-sky-700" width='48px' height='32px' />
      <IconSearch className="text-pink-700" width='48px' height='48px' />
    </div>
  )
}

Color

By default, the svg icon uses currentColor so to change the color you can do 2 things, you can either pass the color directly via className or style or you can set the color from an outer component.

import React from 'react'
 import IconSearch from './IconSearch'

export const MyComponent = () => {

  return (
    <div className='flex items-center'>
      <IconSearch className="text-[red]" width='48px' height='48px' />
      <IconSearch className="text-[blue]" width='48px' height='48px' />
      <IconSearch className="text-[orange]" width='48px' height='48px' />
    </div>
  }

Use any props of svg component

Can use any props of svg component