next-svg-inline-loader

Features:

• SVG as React Include .svg files as React components
• SVGO plugins All SVGO processor plugins supported for example to remove ViewBox or Dimensions etc.

Table of contents

• Installation
• Options
• Usage
• License

Installation

npm install next-svg-inline-loader next-compose-plugins

Add the plugin with next-compose-plugins to your Next.js configuration:

1// next.config.js
2const withPlugins = require("next-compose-plugins");
3const nextSvgInlineLoader = require("next-svg-inline-loader");
4
5module.exports = withPlugins([
6  nextSvgInlineLoader
7  // your other plugins here
8]);

Options

Option	Default	Type	Description
svgoPlugins	see below	Array<{}>	The The list of plugins for the SVGO processor

1// default svgoPlugins
2{ removeViewBox: false },
3{ removeDimensions: false },
4{
5  prefixIds: {
6    delim: "_",
7    prefixIds: true,
8    prefixClassNames: false,
9  },
10}

Typescript

Include a images.d.ts in your source folder

1declare module '*.inline.svg' {
2  import React = require('react')
3
4  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
5  const src: string
6  export default ReactComponent
7}

Usage

You can now simply import images in your projects directly from source folders.

1   const Logo = require('./images/logo.mobile.inline.svg')
2
3  // render
4  <Logo />

License

Licensed under the MIT license.

© Copyright Guy Barnard and Tinia Labs contributors