svgMagic

svgMagicはNext.jsアプリ用に設計されたオープンソースの動的SVG管理パッケージです。1回のインストール、1行のコード、1回のインポートのみでSVGファイルにおける作業を大幅に軽減できる、というものになります。

指定したディレクトリからのsvgファイル動的読み込み、簡単な統合、Tailwindでスタイリング可能、Next.jsアプリとのシームレスな統合などを特徴としています。

以下の様にsvgMagick(SVGM)コンポーネントをインポートし、

import SVGM from "../svgm/SVGM"

以下の様に呼び出すだけでSVGアイコンを実装できるようになります。

<SVGM kind="aws"/>

スタイリングもTailwindのclassを与えるだけです。

<SVGM kind="aws" className="h-10 text-blue-500"/>

まとめると以下のようなコードになります。

import SVGM from '../components/svgm/SVGM';

const ExamplePage = () => (
  <div>
    <SVGM kind="aws" className="h-10 text-blue-500"/>
  </div>
);

export default ExamplePage;

SVGは既にWebサイトやアプリで使用される主流のフォーマットの1つとなっています。管理方法も楽に出来る様にして些事を少しでも減らしたい所ですね。ライセンスはMITとの事です。

svgMagicGithub