storybook-addon-svgr

Storybook 擴充套件，使用 SVGR 將 SVG 轉換為 React 元件

安裝

安裝 Storybook 和 @newhighsco/storybook-addon-svgr

yarn add -D storybook @newhighsco/storybook-addon-svgr @storybook/react-webpack5

使用方式

在您的專案中建立 .storybook/main.js

// .storybook/main.js
/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
  framework: '@storybook/react-webpack5',
  addons: [
    {
      name: '@newhighsco/storybook-addon-svgr',
      options: {
        svgrOptions: {
          /* config options here */
        }
      }
    }
  ]
}

export default config

在您的程式碼中

import starUrl, { ReactComponent as Star } from './star.svg'

const App = () => (
  <>
    <img src={starUrl} alt="star" />
    <Star />
  </>
)

選項

查看 SVGR 支援的選項。或者在您的專案中建立 SVGR 設定檔

更新日誌