material-ui オリジナルsvg iconの色を変える

material-uiのオリジナルのアイコンのカラーを変える

親コンポーネント

import IconFishx1 from '../../../images/icons/IconFishx1'

importして、使う

<IconFishx1 color="red" />

propsでcolorにredを入れる。
子供に渡ってく。

子コンポーネント

colorという種類の合言葉が渡ってくる。
中身はなんだろな。

いろんな色で塗る場合

colorがredの時は赤で塗られる
colorがgreenの時は緑で塗られる

import React from 'react'

const IconFixhx1 = ({ color }) => {
  let fillColor
  switch (color) {
    case 'red':
      return fillColor = '#ff0000'
    case 'green':
      return fillColor = '#008000'
  }
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M22.8957 7.77686L16.7441 11.9226C16.4313 10.6134 14.763 4.50391 8.92417 4.50391C2.25119 4.50391 1 12.1408 1 12.1408C1 12.1408 2.14692 19.7777 8.92417 19.7777C15.7014 19.7777 16.8483 12.1408 16.8483 12.1408L23 17.5957V7.77686H22.8957ZM4.64929 12.1408C3.81517 12.1408 3.08531 11.3771 3.08531 10.5043C3.08531 9.63153 3.81517 8.86784 4.64929 8.86784C5.48341 8.86784 6.21327 9.63153 6.21327 10.5043C6.21327 11.3771 5.48341 12.1408 4.64929 12.1408Z"
        fill={fillColor}
        fillOpacity="0.6"
      />
    </svg>
  )
}

export default IconFixhx1

colorとisActiveと2つのpropsがくる時

import React from 'react'

const IconHashTag = ({ isActive, color }) => {
  let fillColor
  if (color) {
    switch (color) {
      case 'gray':
        fillColor = 'rgba(0,0,0,0.38)'
        break
    }
  } else {
    fillColor = isActive ? '#EF2D29' : 'black'
  }
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      fill={fillColor}
      fillOpacity={isActive ? '1' : '0.6'}
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M10.9 5.1L10.5064 8H14.4793L14.9 4.9C14.9 4.4 15.4 4 15.9 4C16.5 4 17 4.5 16.9 5.1L16.5064 8H19C19.6 8 20 8.4 20 9C20 9.6 19.6 10 19 10H16.235L15.6921 14H18C18.6 14 19 14.4 19 15C19 15.6 18.6 16 18 16H15.4207L15 19.1C15 19.6 14.5 20 14 20C13.4 20 13 19.5 13 18.9L13.3936 16H9.42071L9 19.1C9 19.6 8.5 20 8 20C7.4 20 7 19.5 7 18.9L7.39357 16H5C4.4 16 4 15.6 4 15C4 14.4 4.4 14 5 14H7.665L8.20786 10H6C5.4 10 5 9.6 5 9C5 8.4 5.4 8 6 8H8.47929L8.9 4.9C9 4.4 9.4 4 9.9 4C10.5 4 11 4.5 10.9 5.1ZM13.665 14L14.2079 10H10.235L9.69214 14H13.665Z"
      />
    </svg>
  )
}

export default IconHashTag

redがどうかの2択の場合

import React from 'react'

const IconFixhx1 = ({ color }) => {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M22.8957 7.77686L16.7441 11.9226C16.4313 10.6134 14.763 4.50391 8.92417 4.50391C2.25119 4.50391 1 12.1408 1 12.1408C1 12.1408 2.14692 19.7777 8.92417 19.7777C15.7014 19.7777 16.8483 12.1408 16.8483 12.1408L23 17.5957V7.77686H22.8957ZM4.64929 12.1408C3.81517 12.1408 3.08531 11.3771 3.08531 10.5043C3.08531 9.63153 3.81517 8.86784 4.64929 8.86784C5.48341 8.86784 6.21327 9.63153 6.21327 10.5043C6.21327 11.3771 5.48341 12.1408 4.64929 12.1408Z"
        fill={color === 'red' ? '#ff0000' : 'black'}
        fillOpacity="0.6"
      />
    </svg>
  )
}

export default IconFixhx1