加入直播会议: 美国东部时间周四上午11点,Storybook 9 发布 & AMA

SVGR

使用 SVGR 将 SVG 转换为 React 组件的 Storybook 插件

在 Github 上查看

storybook-addon-svgr NPM version

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 配置文件

更新日志

作者
  • benedfit
    benedfit
  • newhighsco-bot
    newhighsco-bot
兼容
    React
标签