管理栄養士と個人開発者の夫婦ブログ

ABOUT
おまめ
にゃんちゅう
料理・栄養
プログラミング
雑記
デザイン
ホテル・お店
コスメ
ブログ運営

FigmaでSVGを書き出してreact/typescriptでサクっと扱うSVGR

2021-02-14個人開発2740

SVGを使いたい時は、SVGRを使ってます。reactでSVG使うなら個人的には一番ラクな方法です。

手順1. FigmaでSVG書き出し

今回はFigma Communityから、material designのiconを使ってみます。

FigmaをDupliicateします https://www.figma.com/community/file/878585965681562011

使いたいアイコンをSVG形式で書き出します。画面右下のExportから。 image

手順2. SVGR Play Ground

扱うSVGが多ければSVGRを通して変換しても良いのですが、そんなに無いので、PlayGroundを都度利用します。 https://react-svgr.com/playground/ https://github.com/gregberge/svgr

PlayGroundなら、SVGファイルを貼り付けると、良い感じにreactコンポーネントとして吐き出してくれる。 typescriptなど必要なフラグをチェックしてコピー。

手順3. react

このままペーストすればOK。

実例+α

SVGをたまーに、すこしだけ追加するので、僕は svgr.tsx にまとめてます。また、スタイルを調整できるように、少しだけ変更を加えるのがオススメ

  • 流用できるようにinterfaceへとコピペ。
  • svgのfill(色のこと)をcurrrentにしておく
// svgr.tsx
interface iconProps {
props?: React.SVGProps<SVGSVGElement>
svgRef?: React.Ref<SVGSVGElement>
}
export const IconA: React.FC<iconProps> = ({ props, svgRef }) => {
return (
<svg
width="1em"
height="1em"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
ref={svgRef}
{...props}>
<path d="..." fill="current" />
</svg>
)
}
export const IconB: React.FC<iconProps> = ({ props, svgRef }) => {
return (
<svg
width="1em"
height="1em"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
ref={svgRef}
{...props}>
<path d="..." fill="current" />
</svg>
)
}

呼び出す時にはpropsに入れて渡せばOK

import { IconA } from './svgr
export const ComponentA: React.FC<ComponentAProps> = () => {
return <IconA props={{ height: 38, width: 38, color: 'red' }} />
}

↓参考書籍はこちら↓

この記事をシェアする

個人開発」のおすすめ記事も
読んでいってね!

Next/exportで編集可能なHTMLは作れないけど、FTPでも納品できる

2021-07-24 | おまめ

サムネやWEBデザインに使える!メッシュグラデーションまとめ

2021-07-10 | おまめ

FigmaでSVGを書き出してreact/typescriptでサクっと扱うSVGR

2021-02-14 | おまめ

Vercel + Contentful「Resource is limited」でデプロイできなくなった

2020-12-30 | おまめ

年内にもう一度読みたい!PM向けオススメ記事7選+α

2020-12-27 | おまめ

初心者がReact/Next.js + Vercelでブログ作るまで[1]

2020-11-14 | おまめ
おまめ
おまめ
夫。個人開発者・ブロガー・デザイナー。夫婦でサイドFIRE目指してます。