https://github.com/morganney/storybook-preset-inline-svg

Storybook preset to inline SVG.
https://github.com/morganney/storybook-preset-inline-svg

inline-svg storybook-addon svg

Last synced: 22 days ago
JSON representation

Storybook preset to inline SVG.

• Host: GitHub
• URL: https://github.com/morganney/storybook-preset-inline-svg
• Owner: morganney
• Created: 2021-08-21T15:47:34.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-08-28T15:45:52.000Z (over 3 years ago)
• Last Synced: 2024-11-11T06:45:13.526Z (about 2 months ago)
• Topics: inline-svg, storybook-addon, svg
• Language: JavaScript
• Homepage:
• Size: 57.6 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# storybook-preset-inline-svg

A [Storybook preset](https://storybook.js.org/docs/react/addons/writing-presets) to load SVG files inline using `svg-inline-loader`.

## Basic Usage

First `npm install storybook-preset-inline-svg svg-inline-loader`

Then update one of the following files based on your Storybook setup:

* `.storybook/main.js`

    ```js

    module.exports = {

        addons: ['storybook-preset-inline-svg']

    }

    ```

* `.storybook/presets.js`

    ```js

    module.exports = ['storybook-preset-inline-svg']

    ```

## Advanced Usage

By default this preset will inline ***all*** SVG files. Use options to filter which SVG files are inlined, or to pass options along to `svg-inline-loader`.

None of the options are required. Only use one of `include` or `exclude`, not both, which can be a `RegExp` or `Function`.

* `svgInlineLoaderOptions` options supported by [svg-inline-loader](https://www.npmjs.com/package/svg-inline-loader)

* `include` files to be inlined using [include](https://webpack.js.org/configuration/module/#ruleinclude)

* `exclude` files from being inlined using [exclude](https://webpack.js.org/configuration/module/#ruleexclude)

For example,

```js

module.exports = {

  addons: [

    {

      name: 'storybook-preset-inline-svg',

      options: {

        include: /source\/.+\.svg$/,

        svgInlineLoaderOptions: {

          removeTags: true,

          removingTags: ['circle']

        }

      }

    }

  ]

}

```