Zenn
AIQ Tech Blog (有志)Publicationへの投稿
⚔️

ReactでSVGをComponent内で利用する3つの方法とSVGのstyleの変更方法

まさぴょん
2023/09/23に公開
Next.js
React
TypeScript
frontend
SVG
tech

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は、ReactでSVGをComponentとして利用する2つの方法について、解説します。

今回のTest用のSVG素材と、DefaultのStyleの状態を確認する

次のようなよく見かけるListのSVGファイルを用意したので、これを使用して、説明していきます。

今回使用するSVGのDefaultStyleで、検証対象となるプロパティの一覧
  1. svgタグのwidth="16"
  2. svgタグのheight="16"
  3. pathタグのfill="#AFAEB3"
    • fillは、CSSで言うcolorみたいなプロパティです。
list.svg
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_1235_3833" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<rect width="16" height="16" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_1235_3833)">
<path d="M5.33333 6.00008C5.14444 6.00008 4.98611 5.93619 4.85833 5.80841C4.73056 5.68064 4.66667 5.5223 4.66667 5.33341C4.66667 5.14453 4.73056 4.98619 4.85833 4.85841C4.98611 4.73064 5.14444 4.66675 5.33333 4.66675H13.3333C13.5222 4.66675 13.6806 4.73064 13.8083 4.85841C13.9361 4.98619 14 5.14453 14 5.33341C14 5.5223 13.9361 5.68064 13.8083 5.80841C13.6806 5.93619 13.5222 6.00008 13.3333 6.00008H5.33333ZM5.33333 8.66675C5.14444 8.66675 4.98611 8.60286 4.85833 8.47508C4.73056 8.3473 4.66667 8.18897 4.66667 8.00008C4.66667 7.81119 4.73056 7.65286 4.85833 7.52508C4.98611 7.3973 5.14444 7.33341 5.33333 7.33341H13.3333C13.5222 7.33341 13.6806 7.3973 13.8083 7.52508C13.9361 7.65286 14 7.81119 14 8.00008C14 8.18897 13.9361 8.3473 13.8083 8.47508C13.6806 8.60286 13.5222 8.66675 13.3333 8.66675H5.33333ZM5.33333 11.3334C5.14444 11.3334 4.98611 11.2695 4.85833 11.1417C4.73056 11.014 4.66667 10.8556 4.66667 10.6667C4.66667 10.4779 4.73056 10.3195 4.85833 10.1917C4.98611 10.064 5.14444 10.0001 5.33333 10.0001H13.3333C13.5222 10.0001 13.6806 10.064 13.8083 10.1917C13.9361 10.3195 14 10.4779 14 10.6667C14 10.8556 13.9361 11.014 13.8083 11.1417C13.6806 11.2695 13.5222 11.3334 13.3333 11.3334H5.33333ZM2.66667 6.00008C2.47778 6.00008 2.31944 5.93619 2.19167 5.80841C2.06389 5.68064 2 5.5223 2 5.33341C2 5.14453 2.06389 4.98619 2.19167 4.85841C2.31944 4.73064 2.47778 4.66675 2.66667 4.66675C2.85556 4.66675 3.01389 4.73064 3.14167 4.85841C3.26944 4.98619 3.33333 5.14453 3.33333 5.33341C3.33333 5.5223 3.26944 5.68064 3.14167 5.80841C3.01389 5.93619 2.85556 6.00008 2.66667 6.00008ZM2.66667 8.66675C2.47778 8.66675 2.31944 8.60286 2.19167 8.47508C2.06389 8.3473 2 8.18897 2 8.00008C2 7.81119 2.06389 7.65286 2.19167 7.52508C2.31944 7.3973 2.47778 7.33341 2.66667 7.33341C2.85556 7.33341 3.01389 7.3973 3.14167 7.52508C3.26944 7.65286 3.33333 7.81119 3.33333 8.00008C3.33333 8.18897 3.26944 8.3473 3.14167 8.47508C3.01389 8.60286 2.85556 8.66675 2.66667 8.66675ZM2.66667 11.3334C2.47778 11.3334 2.31944 11.2695 2.19167 11.1417C2.06389 11.014 2 10.8556 2 10.6667C2 10.4779 2.06389 10.3195 2.19167 10.1917C2.31944 10.064 2.47778 10.0001 2.66667 10.0001C2.85556 10.0001 3.01389 10.064 3.14167 10.1917C3.26944 10.3195 3.33333 10.4779 3.33333 10.6667C3.33333 10.8556 3.26944 11.014 3.14167 11.1417C3.01389 11.2695 2.85556 11.3334 2.66667 11.3334Z" fill="#AFAEB3"/>
</g>
</svg>

imgタグでSVGを読み込む方法とStyleの変化

ReactでSVGをComponent内で利用する方法の1つ目は、imgタグでSVGを読み込む方法になります。
こちらは、おそらく1番メジャーなやり方なような気がします。

SampleCodeは、次のとおりです。

SvgTest.tsx
import ListIcon from "../assets/icons/list.svg";

/**
 * 1. imgタグで、SVGを表示する場合
 * =>  width や height は、変更できる。
 * => color は、変更できない。
 */
const SvgTest = () => {
  return (
    <div>
      <img
        src={ListIcon}
        alt=""
        width={30}
        height={30}
        style={{ color: "red" }}
      />
    </div>
  );
};
export default SvgTest;

SVGの表示結果とStyleの変化

SampleCodeの実行結果は、次のような表示になります。

  • width や height は、変更できていることが確認できます。
  • しかし、colorは、変更できないことを確認しました。

ReactComponentとしてSVGをインポートする方法

次にご紹介する、ReactでSVGをComponentとして利用するは、
ReactComponentとしてSVGをインポートする方法になります。

こちらは、ReactComponentというReact公式が用意してくれている機能を活用して、SVGをComponentとして認識させるようなやり方になります。

SampleCodeは、次のとおりです。

ListSvg.tsx
import { ReactComponent as ListIcon } from "../assets/icons/list.svg";

/**
 * 2. ReactComponentとしてSVGインポートする場合
 * =>  width や height は、変更できる。
 * => color は、変更できない。
 */
const SvgTest2 = () => {
  return (
    <ListIcon width={50} height={50} style={{ height: "70px", fill: "blue" }} />
  );
};
export default SvgTest2;

SVGの表示結果とStyleの変化

SampleCodeの実行結果は、次のような表示になります。

  • width や height は、変更できていることが確認できます。
  • しかし、こちらもcolorは、変更できないことを確認しました。

SVGのSrcCodeをReactファイルのComponentにする方法

最後に、ReactでSVGをComponent内で利用する方法をご紹介します。

おすすめの理由は、次のとおり。

  1. SVGのSrcCodeをそのままReactComponentにするので、カスタマイズ性が高い。
  2. styleの変更がしやすく、colorも変更できる。

SampleCodeは、次のとおりです。

ListSvg.tsx
import { CSSProperties } from 'react';

/** Propsの型定義 */
interface PropsType {
  style?: CSSProperties;
  color?: string;
}

/**
 * NOTE: ListSvg
 * => リスト表示 の SVG_Icon
 */
const ListSvg = (props: PropsType) => {
  return (
    <svg
      width='16'
      height='16'
      viewBox='0 0 16 16'
      fill='none'
      xmlns='http://www.w3.org/2000/svg'
      style={props.style ? props.style : undefined}
    >
      <g mask='url(#mask0_1235_3833)'>
        <path
          d='M5.33333 6.00008C5.14444 6.00008 4.98611 5.93619 4.85833 5.80841C4.73056 5.68064 4.66667 5.5223 4.66667 5.33341C4.66667 5.14453 4.73056 4.98619 4.85833 4.85841C4.98611 4.73064 5.14444 4.66675 5.33333 4.66675H13.3333C13.5222 4.66675 13.6806 4.73064 13.8083 4.85841C13.9361 4.98619 14 5.14453 14 5.33341C14 5.5223 13.9361 5.68064 13.8083 5.80841C13.6806 5.93619 13.5222 6.00008 13.3333 6.00008H5.33333ZM5.33333 8.66675C5.14444 8.66675 4.98611 8.60286 4.85833 8.47508C4.73056 8.3473 4.66667 8.18897 4.66667 8.00008C4.66667 7.81119 4.73056 7.65286 4.85833 7.52508C4.98611 7.3973 5.14444 7.33341 5.33333 7.33341H13.3333C13.5222 7.33341 13.6806 7.3973 13.8083 7.52508C13.9361 7.65286 14 7.81119 14 8.00008C14 8.18897 13.9361 8.3473 13.8083 8.47508C13.6806 8.60286 13.5222 8.66675 13.3333 8.66675H5.33333ZM5.33333 11.3334C5.14444 11.3334 4.98611 11.2695 4.85833 11.1417C4.73056 11.014 4.66667 10.8556 4.66667 10.6667C4.66667 10.4779 4.73056 10.3195 4.85833 10.1917C4.98611 10.064 5.14444 10.0001 5.33333 10.0001H13.3333C13.5222 10.0001 13.6806 10.064 13.8083 10.1917C13.9361 10.3195 14 10.4779 14 10.6667C14 10.8556 13.9361 11.014 13.8083 11.1417C13.6806 11.2695 13.5222 11.3334 13.3333 11.3334H5.33333ZM2.66667 6.00008C2.47778 6.00008 2.31944 5.93619 2.19167 5.80841C2.06389 5.68064 2 5.5223 2 5.33341C2 5.14453 2.06389 4.98619 2.19167 4.85841C2.31944 4.73064 2.47778 4.66675 2.66667 4.66675C2.85556 4.66675 3.01389 4.73064 3.14167 4.85841C3.26944 4.98619 3.33333 5.14453 3.33333 5.33341C3.33333 5.5223 3.26944 5.68064 3.14167 5.80841C3.01389 5.93619 2.85556 6.00008 2.66667 6.00008ZM2.66667 8.66675C2.47778 8.66675 2.31944 8.60286 2.19167 8.47508C2.06389 8.3473 2 8.18897 2 8.00008C2 7.81119 2.06389 7.65286 2.19167 7.52508C2.31944 7.3973 2.47778 7.33341 2.66667 7.33341C2.85556 7.33341 3.01389 7.3973 3.14167 7.52508C3.26944 7.65286 3.33333 7.81119 3.33333 8.00008C3.33333 8.18897 3.26944 8.3473 3.14167 8.47508C3.01389 8.60286 2.85556 8.66675 2.66667 8.66675ZM2.66667 11.3334C2.47778 11.3334 2.31944 11.2695 2.19167 11.1417C2.06389 11.014 2 10.8556 2 10.6667C2 10.4779 2.06389 10.3195 2.19167 10.1917C2.31944 10.064 2.47778 10.0001 2.66667 10.0001C2.85556 10.0001 3.01389 10.064 3.14167 10.1917C3.26944 10.3195 3.33333 10.4779 3.33333 10.6667C3.33333 10.8556 3.26944 11.014 3.14167 11.1417C3.01389 11.2695 2.85556 11.3334 2.66667 11.3334Z'
          fill={props.color ? props.color : '#AFAEB3'}
        />
      </g>
    </svg>
  );
};

export default ListSvg;

呼び出す時は、次のように呼び出します。

Home.tsx
import ListIconSvg from "./atoms/icons/ListIconSvg";

const Home = () => {
  return (
    <div>
      {/* ListIcon */}
      <div
        style={{
          textAlign: "center",
        }}
      >
        <ListIconSvg style={{ width: "80px", height: "80px" }} color={"blue"} />
      </div>
    </div>
  );
};

export default Home;

SVGの表示結果とStyleの変化

SampleCodeの実行結果は、次のような表示になります。

  • width や height, color、すべて変更できていることが確認できました。

まとめ

Reactで、SVGを読み込み利用する方法は、いくつかありますが、
1番おすすめなのは、SVGのSrcCodeをReactファイルのComponentにする方法になります。

SVGは、FrontEndの開発では、欠かせない存在なので、ぜひこの記事の内容を活用してみてください。

個人で、Blogもやっています、よかったら見てみてください。

https://masanyon.com/

注意事項

この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。

参考・引用

https://nishinatoshiharu.com/display-svg-on-react/

https://zenn.dev/hayato94087/articles/74f26e80450f97

求む、冒険者！

AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨

エンジニア視点での我が社のおすすめポイント

  1. フルリモート・フルフレックスの働きやすい環境！
    • 前の会社でアサインしてた現場は、フル出社だったので、ありがたすぎる。。。
    • もうフル出社には、戻れなくなります！
  2. 経験豊富なエンジニアの先輩方
    • 私は、3年目の駆け出しエンジニアなので、これが、かなりありがたいです！
  3. 自社開発とR&D(受託開発)を両方している会社なので、経験できる技術が多い。
    • 自社のProduct開発と、他社からの受託案件で、いろいろな技術を学ぶことができます。
  4. AI関連の最新の技術に触れられるチャンスが多い。
    • 自社で特許を持つほど、AI技術に強い会社で、プロファイリングを得意とした技術体系があります。
    • ChatGPTを自社アプリに搭載など、AIトレンドも、もちろん追っており、最新の技術に触れられるチャンスが多いです。
  5. たまに、札幌ラボ(東京から札幌) or 東京オフィス(札幌から東京)に出張で行ける！
    • 東京と、札幌に2拠点ある会社なので、会合などで集まる際に、出張で行けます。

採用技術 (一部抜粋)

  • FrontEnd: TypeScript, JavaScript, React.js, Vue.js, Next.js, Nuxt.js など
  • BackEnd: Node.js, Express,Python など
  • その他技術: Docker, AWS, Git, GitHub など

エントリー方法

  1. 私達と東京か札幌で一緒に働ける仲間を募集しています。
    詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。

Webエンジニア向け説明

https://www.wantedly.com/projects/1089410

データサイエンティスト向け説明

https://www.wantedly.com/projects/1089406

人事に直通(?)・ご紹介Plan(リファラル採用)

私経由で、ご紹介もできますので、興味のある方や気軽にどんな会社なのか知りたい方は、X(旧:Twitter)にて、DMを送ってくれても大丈夫です。
https://twitter.com/masanyon1212

AIQ Tech Blog (有志)
AIQ Tech Blog (有志)Publication

AIQ 株式会社 に所属するエンジニアが技術情報をお届けします。 ※ AIQ 株式会社 社員による個人の見解であり、所属する組織の公式見解ではありません。 Wantedly: wantedly.com/companies/aiqlab

Discussion