かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

svg

Vite React (TypeScript) vite-plugin-svgr で SVG をコンポーネントとして扱う

vite-plugin-svgr プラグインがアップデートされ設定などが変わっていたので改めてメモ 環境 vite-plugin-svgr 4.2.0 Vite 4.4.9 TypeScript 5.1.6 vite-plugin-svgr v3 → v4 結論は最下部にあります。お急ぎの方は途中スキップしてください! Before プラグ…

Vite React (TypeScript) で SVG を ReactComponent として扱いたい

1. vite-plugin-svgr プラグインを使う 2. .svg の型定義ファイルを作成する

Next.js SVG ファイルを React component として import したい!

create-react-app した React アプリでは何もしなくても SVG ファイルを import { ReactComponent as MySVGImage } from './svg/my-image.svg'; で読み込みコンポーネントとして扱うことができました。 Next.js でも同じことができると思ったのですが、creat…

React create-react-app したプロジェクトで inline-svg を使いたい

SVGな画像を扱う時に、CSSやJSで色などをコントロールしたい場合、inline-svg にするのが扱いやすくて良いです。 create-react-app で作成した React のプロジェクトで eject せずに inline-svg を使えるように出来たのでメモ。 環境 "react": "^16.13.1" "r…