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

作ったブロックにオリジナル性を持たせる為にアイコン等にSVGを使うケースは多いです。
しかし、そのままSVGを使用するのは色々大変です。ここでは、便利にSVGファイルを扱えるようにする@svgr/webpackを設定してSVGファイルを簡単に扱えるようにしてみましょう!

@svgr/webpackを使うとどう言う事が出来るの?

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

と言う記述でSVGファイルをimport出来るようになり、使用する際も

icon = { logo() }

のように使うだけで、SVGファイルを取り扱えます。

テネーブル

icon等のSVGとして使用する場合は、関数として使用する為にカッコを付けるのを忘れないようにしましょう。

テネーブル(アイコン01)

@svgr/webpackを使用できるように設定しよう

@svgr/webpackはライブラリの一種ですので、SVGファイルの読み込み時にライブラリを使ってSVGファイルを読むようにします。

webpackの設定を行いましょう

@svgr/webpackをSVG時のモジュールで使用する為に、webpackの設定を追加します。

webpack.config.jsmodule内のrulesに下記を追加記述し、SVGファイルの読み込み時の設定を行います。

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

必須ではないけれど、removeViewBoxfalseにする事で、SVGのviewbox設定を使用する設定となるようだよ。trueにしているとviewboxが無視されるから、正しくSVGが出なくなったり、おかしくなったりをする時もあるからSVGを綺麗に表示したい場合は、falseで設定しておこう!

ルミェール(アイコン01)

package.jsonにも設定を行います

@svgr/webpackのパッケージモジュールを正しく管理をする為に、管理設定の追加を行う必要があります。package.jsonにも設定を行いましょう。

package.jsondevDependencies要素に

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

を追加します。