Socket
Socket
Sign inDemoInstall

babel-plugin-inline-react-svg

Package Overview
Dependencies
82
Maintainers
6
Versions
19
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    babel-plugin-inline-react-svg

A babel plugin that optimizes and inlines SVGs for your react components.


Version published
Maintainers
6
Install size
8.82 MB
Created

Changelog

Source

v2.0.2 - 2023-02-22

Merged

Fixed

  • [Fix] Register export declaration in scope #74

Commits

  • [meta] add auto-changelog 0137651
  • [Tests] migrate from travis to github actions 63611b5
  • [Dev Deps] update @babel/cli, @babel/node, @babel/preset-react, eslint, eslint-config-airbnb, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react b839b94
  • [readme] Update svgo configuration example e37c29b
  • [Fix] Fix crash when svg has a style tag in the root element; pass path to SVGO a4c1c4c
  • [meta] use npmignore to autogenerate an npmignore file aeb3ddf
  • [Deps] update resolve, svgo b29d6a6
  • [meta] add safe-publish-latest and use prepublishOnly 982144b
  • [Dev Deps] update @babel/cli, @babel/plugin-transform-typescript 815bb4a

Readme

Source

babel-plugin-inline-react-svg

Transforms imports to SVG files into React Components, and optimizes the SVGs with SVGO.

For example, the following code...

import React from 'react';
import CloseSVG from './close.svg';

const MyComponent = () => <CloseSVG />;

will be transformed into...

import React from 'react';
const CloseSVG = () => <svg>{/* ... */}</svg>;

const MyComponent = () => <CloseSVG />;

Installation

npm install --save-dev babel-plugin-inline-react-svg

Usage

.babelrc

{
  "plugins": [
    "inline-react-svg"
  ]
}
Options
  • ignorePattern - A pattern that imports will be tested against to selectively ignore imports.
  • caseSensitive - A boolean value that if true will require file paths to match with case-sensitivity. Useful to ensure consistent behavior if working on both a case-sensitive operating system like Linux and a case-insensitive one like OS X or Windows.
  • svgo - svgo options (false to disable). Example:
{
  "plugins": [
    [
      "inline-react-svg",
      {
        "svgo": {
          "plugins": [
            {
              "name": "removeAttrs", 
              "params": { "attrs": "(data-name)" }
            },
            "cleanupIDs"
          ]
        }
      }
    ]
  ]
}

Note: If plugins field is specified the default enabled svgo plugins will be overrided. Alternatively, if your Babel config is in JavaScript, the default list of plugins can be extended by making use of the extendDefaultPlugins utility provided by svgo.

const { extendDefaultPlugins } = require('svgo');

module.exports = {
  plugins: [
    [
      'inline-react-svg',
      {
        svgo: {
          plugins: extendDefaultPlugins([
            {
              name: 'removeAttrs',
              params: { attrs: '(data-name)' }
            },
            'cleanupIDs',
          ])
        }
      }
    ]
  ]
}

Via CLI

$ babel --plugins inline-react-svg script.js

Via Node API

require('@babel/core').transform('code', {
  plugins: [
    ['inline-react-svg', { filename: 'filename representing the code' }],
  ]
}) // => { code, map, ast };

Inspired by and code foundation provided by react-svg-loader.

Keywords

FAQs

Last updated on 23 Feb 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc