14
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Create React App で SVG をコンポーネントとしてimport して使用する

Posted at

Create React App を使用している場合、 svgファイルをコンポーネントとして import して使用できるということを今日知ったのでメモしておきます。公式ドキュメントはこちらになります。

SVG をコンポーネントとして import

svgファイルからReactComponentをimportする形式を取ることでコンポーネントとして扱えます。

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

対応バージョン

react-scripts@2.0.0以上かつ、react@16.3.0以上の場合に使用可能です。

##参考URL
Create React App documents (https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files)

14
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?