### 1. [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) をインストール

[SVGR](https://react-svgr.com/)用のWebpack ローダーです。
[SVGR](https://react-svgr.com/)はSVGをReactコンポーネントに変換してくれるツールです。

![img](/mosaic-code.jpg)

### 2. `next.config.js` にwebpackの設定を追加する

![img](/mosaic-code.jpg)

### 3. SVGをimportする

![img](/mosaic-code.jpg)

### 4. コンポーネントとして使う

![img](/mosaic-code.jpg)



#### 参考
[NextJS 12 SVG Embed.md](https://gist.github.com/lukebussey/8387bb038629dccc01a62487614f44df)
[https://react-svgr.com/](https://react-svgr.com/)
[@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack)

### 1. [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) をインストール

[SVGR](https://react-svgr.com/)用のWebpack ローダーです。
[SVGR](https://react-svgr.com/)はSVGをReactコンポーネントに変換してくれるツールです。

```
yarn add -D @svgr/webpack
```

### 2. `next.config.js` にwebpackの設定を追加する

```js
const moduleExports = {
  webpack(config) {
    const fileLoaderRule = config.module.rules.find(
      (rule) => rule.test && rule.test.test('.svg'),
    )
    fileLoaderRule.exclude = /\.svg$/
    config.module.rules.push({
      test: /\.svg$/,
      loader: require.resolve('@svgr/webpack'),
    })
    return config
  },
}
```

### 3. SVGをimportする

```js
import Logo from 'public/images/logo.svg';
```

### 4. コンポーネントとして使う

```js
<Logo className="h-8 w-auto sm:h-10" alt="Site Title" />
```



#### 参考
[NextJS 12 SVG Embed.md](https://gist.github.com/lukebussey/8387bb038629dccc01a62487614f44df)
[https://react-svgr.com/](https://react-svgr.com/)
[@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack)

1. @svgr/webpack をインストール

2. `next.config.js` にwebpackの設定を追加する

3. SVGをimportする

4. コンポーネントとして使う

参考

エンジニアとの取引を安全にかんたんに

国内No.1のEXPERT DX プラットフォーム

1. @svgr/webpack をインストール

2. next.config.js にwebpackの設定を追加する

3. SVGをimportする

4. コンポーネントとして使う

参考

エンジニアとの取引を安全にかんたんに

国内No.1のEXPERT DX プラットフォーム

2. `next.config.js` にwebpackの設定を追加する