【React】SVGファイルをインラインで読み込んで、React Componentにする方法
どうも、イソップです。 Reactアプリケーションでは、アイコンを使うことが多いと思いますが、 画像アイコンでは再レンダリング時に表示がチラついてしまうので、 Font AwesomeなどのフォントアイコンやSVG画像を利用するのが、個人的にきれいに表示するコツです。 インラインSVGを利用すれば、レスポンシブに対応させつつ、 アイコンカラーを変えたりアニメーションさせたりできるので、とてもオススメです。 ただ、インラインで用意しなければならず少し扱いが面倒なんですよね。 そこで、今回はちょっと面倒なSVGファイルを、 インラインSVGで読み込み、React Componentとして読み込む方法を紹介します。 react-svg-loaderを使ってSVGファイルをインライン展開 SVGファイルの読み込みをreact-svg-loaderで行います。 react-svg-loader この
SVGファイルをズバッとReact Componentsに変換する - wadackel.me
Sketch なり Illustrator なりで作成した SVG のアイコン群を、React のコンポーネントとして扱いたくなりました。アイコンの数が少なければ、SVG のコードを手動でコピペしてコンポーネント化すれば良さそうですが、3 個くらいからもう辛くなってきそうです。 SVG を外部ファイル化して読み込むことも考えましたが、CSS でのスタイル指定が面倒になることや、HTTP リクエスト数を抑えるという点を考慮すると、やはりコンポーネント化しておくのが無難な気がします。 ただ、そこへ労力を割くのは微妙な気がするので、ある程度自動でズバッと出来ないかなと試してみたら、react-svg-converterを使うことで簡単に実現出来たので、その工程についてメモです。 前提 上記の様なアイコンセット(SVG ファイル)を React コンポーネント(JSX)化したい 書き出されるコンポ
Free SVG Converter
This area has been made to save SVG images for later. It's really helpful when you need to compare filters result, or to make a backup. Only you can see them (it's a local save) What is a SVG file ? Svg (Scalable Vector Graphics) is an XML-based vector image format for two-dimensional graphics. The advantage is that you can modify image size without losing quality and detail. This vector format de
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
