ブロックのアイコンにSVGを!簡単に使う為の@svgr/webpack

作ったブロック、アイコンをオリジナルにしたいけどSVGの変換とか色々大変…
便利に設定できるようにしてしまいましょう!

webpackで、@svgr/webpackを使う

単純に、svgの読み込み時に@svgr/webpackと言うライブラリを使って読むようにするだけです。設定してみましょう。

設定

webpack.config.jsのmodule内のrulesに下記を追加記述します。

{
  test: /\.svg$/,
  use: ( { resource } ) => ( {
    loader: '@svgr/webpack',
    options: {
      svgoConfig: {
        plugins: [
          {
            removeViewBox: false,
          },
        ],
      },
    },
  } ),
},

removeViewBoxをfalseにする事で、正しく色付けがされるようです(必須ではないです)

次に、package.jsonに@svgr/webpackを使用する為の記述をします。

"@svgr/webpack": "^4.1.0",

使ってみる

import logo from './svg/logo.svg';

として使いたいSVGファイルをimportし、

icon={ logo() }

などとして設定します。icon等で使う場合はカッコを付ける事を忘れずにします。
カッコが無い場合はSVGの記述がそのまま反映されるようです。表示部分に使えそうです。

この記事を書いた人

kmix-39

kmix-39

主に日本の関西に出没する。
小学時代にWindows 95に触れ、BASICを始めて以来、HTML、Perl、Java(JSP, Servlet)、COBOL、C++、C#、PHP、Objective-C、Swift…と、数々の言語を地獄の現場を経験しながら覚えていった元IT社畜。
「好きな時に 好きなことを 好きなだけ」をしたい。