Rendering and Size

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

// file HeartIcon.tsx
  import React from "react";

  function HeartIcon(props) {
    return (
      <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
        <path d="M12.76 3.76a6 6 0 018.48 8.48l-8.53 8.54a1 1 0 01-1.42 0l-8.53-8.54a6 6 0 018.48-8.48l.76.75.76-.75zm7.07 7.07a4 4 0 10-5.66-5.66l-1.46 1.47a1 1 0 01-1.42 0L9.83 5.17a4 4 0 10-5.66 5.66L12 18.66l7.83-7.83z" />
      </svg>
    );
  }
  export default HeartIcon;

Then you can render them directly

import React from 'react'
import HeartIcon from './HeartIcon'

export const MyComponent = () => {

  return (
    <div className='flex items-center'>
      <HeartIcon className="text-red-700" width='48px' height='16px' />
      <HeartIcon className="text-sky-700" width='48px' height='32px' />
      <HeartIcon 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 HeartIcon from './HeartIcon'

export const MyComponent = () => {

  return (
    <div className='flex items-center'>
      <i style={{ color: 'pink'}}>
        <HeartIcon width='48px' height='48px' />
      </i>
      <i className='text-pink-600'>
        <HeartIcon width='48px' height='48px' />
      </i>
      <HeartIcon className="text-pink-500" width='48px' height='48px' />
    </div>
  )
}

Wrapper Icon

The above sometimes can be too verbose to use, you can rectify this by creating your own wrapper icon that can simplify the attributes. An example of this wrapper component is shown below.

import React, { DetailedHTMLProps, HTMLAttributes } from 'react'

interface IIconProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  size?: number
  color?: string
  icon: React.ReactType
}

export const Icon: React.FC<IIconProps> = (props) => {
  const { size, color, icon, style: styleArg, ...svgProps } = props
  let svgExtraProps: any = {}

  if (size !== undefined) {
    svgExtraProps.width = `${size}px`
    svgExtraProps.height = `${size}px`
  } else {
    // default
    svgExtraProps.width = '24px'
    svgExtraProps.height = '24px'
  }

  if (color !== undefined) {
    svgExtraProps.style = { color, ...styleArg }
  }
  const IconComp: React.ReactType = icon
  return (
    <IconComp {...svgProps } {...svgExtraProps} />
  )
}

Then using it simply becomes a matter of doing something like:

import React from 'react'
import HeartIcon from './HeartIcon'

export const MyComponent = () => {

  return (
    <div className='flex items-center'>
      <Icon color='deeppink' icon={HeartIcon} />
      <Icon
        onClick={() => alert('pink')}
        color='deeppink'
        size={48}
        icon={HeartIcon}
      />
      <Icon
        className='text-pink-800 hover:text-pink-600'
        size={48}
      icon={HeartIcon} />
    </div>
  )
}

Animation

You can animate some svg icons by simply using css. For example, the given keyframe can be applied

@keyframes rotate {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg);
  }
}

You should now be able to apply it as a css or style

import React from 'react'
import HeartIcon from './HeartIcon'

export const MyComponent = () => {

  return (
    <div className='flex items-center'>
      <Icon
        style={{ animation: 'rotate 1s linear infinite' }}
        color='deeppink'
        size={32}
        icon={Refresh}
      />
    </div>
  )
}