asoview! TECH BLOG

アソビュー株式会社のテックブログ

SVGRを使ってSVGのIconコンポーネントを自動生成してStorybookも出力したい

f:id:masino83:20220316140300j:plain

👴 画像ファイルの思い出

📕 主要ライブラリのSVGアイコンの扱い方について

 

create-react-appもだいたい同じ感じです。(内部的にはsvgr使ってるんですね)

 

 

😐 課題感

importを書く時のサジェストが効かない

storybookにしづらく一覧化できない

💁‍♂ 実現したいこと

🤔どうやるか

baseweb/build-icons.js at master · uber/baseweb

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…

github.com

 

 

SVGR - Transforms SVG into React Components. - SVGR

A complete tool box to take advantage of using SVGs in your React applications. SVGR handles all type of SVG and…

react-svgr.com

 

⚛️ SVGRとその設定

SVGRとは?

yarn add @svgr/cli -D

ディレクトリ構造

script/svg-generate
├ svgs // svgファイルの置き場
│ ├ chevron-normal.svg
│ ├ exclamation-mark-circle.svg
│ └ location-arrow.svg
├ svgr.config.js // コンフィグファイル
├ template.tsx // コンポーネントのテンプレート
└ index-template.tsx // indexファイルのテンプレート

svgr.config.js

gist.github.com

template.tsx(コンポーネントのテンプレート)

gist.github.com

index-template.tsx(indexファイル用のテンプレート)

Icon
├ index.tsx //←これがindexファイル
├ AwesomeSVGComponent1.tsx
├ AwesomeSVGComponent2.tsx
└ AwesomeSVGComponent3.tsx

 

gist.github.com

 

import { IconXmarkCircleNormal } from '../Icon'

storybookのためにindex-template.tsxを修正

 

gist.github.com

 

package.jsonのscript

 

gist.github.com

 

☺️結果

script/svg-generate
├ svgs // svgファイルの置き場
│ ├ chevron-normal.svg
│ ├ exclamation-mark-circle.svg
│ └ location-arrow.svg
├ svgr.config.js // コンフィグファイル
├ template.tsx // コンポーネントのテンプレート
└ index-template.tsx // indexファイルのテンプレート
yarn icon:generate
Icon
├ index.tsx
├ IconChevronNormal.tsx
├ IconExclamationMarkCircle.tsx
└ IconLocationArrow.tsx

個々のコンポーネント

 

gist.github.com

 

indexファイル

gist.github.com

 

まとめ

 

www.wantedly.com