React `ReactComponent as` で inline-svg を使う時に気をつけること

create-react-app や react-scripts で作った React のプロジェクトは下記のような感じで svg ファイルを inline-svg として使うことができます。

import React from 'react';
import { ReactComponent as MySVGIcon } from './img/my-svg-icon.svg';

function App() {
  return <MySVGIcon />
}

{ ReactComponent as <アイコン名> } で指定する inline-svg のコンポーネント名は大文字から始めなければならない。

次のように小文字で始めてしまっているとエラーになって表示されない

import React from 'react';
import { ReactComponent as mySVGIcon } from './img/my-svg-icon.svg';

function App() {
  return <mySVGIcon />
}

👇

Warning: <mySVGIcon /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

PascalCase => 🐫Upper Camel Case 🐫って事、つまり大文字から始めないと ReactComponent として認識されないということっぽい！

完

[参考]