Next.js アプリケーションで svg ファイルを コンポーネントに変換して表示する方法、svg に直接クラスをつけて、アニメーションさせる方法を確認します。
アプリ作成とパッケージをインストール
アプリを作成します。
npx create-next-app@latest@svgr/webpack を使用して、svg ファイルをReact コンポーネントに変換します。
SVGR は、SVG を React コンポーネントに変換するための汎用ツールです。 SVGR は生の SVG を取得し、すぐに使用できる React コンポーネントに変換します。
npm i @svgr/webpackファイル構成
|-- next.config.js
`-- app //
|-- page.jsx
|-- globals.css
`-- components //
`-- icons //
|-- index.js
`-- Dots.svgsvg をコンポーネントに変換する
@svgr/webpack をインストールして、next.config.js ファイルに設定を追加します。
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config) => {
config.module.rules.push({
test: /\.svg$/,
use: [
{
loader: "@svgr/webpack",
options: {
svgoConfig: {
plugins: [
{
name: "removeViewBox",
active: false,
},
],
},
},
},
],
});
return config;
},
};
module.exports = nextConfig;
option を追加して変換時に class名が書き換えられるのを防いでいます。参考
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<circle class="flash" cx="4.5" cy="12.5" r="2" />
<circle class="flash" style="animation-delay: 300ms;" cx="12.5" cy="12.5" r="2" />
<circle class="flash" style="animation-delay: 600ms;" cx="20.5" cy="12.5" r="2" />
</svg>svg ファイルは自動的に変換されます。
export { default as Dots } from "./Dots.svg";表示させてアニメーションさせる
import { Dots } from './components/icons/index'
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<Dots className="text-blue-400" />
</main>
)
}読み込んで表示します。
css や tailwind css などを使用して、色の変更やアニメーションさせることができます。
.flash {
animation: 1s flash linear infinite
}
@keyframes flash{
50% {fill: transparent}
}以上です。
