@svgr/core

What is @svgr/core?

The @svgr/core package is a tool that transforms SVG images into React components. This allows developers to easily import and use SVG files as React components in their projects, enhancing the integration of vector graphics with React applications.

What are @svgr/core's main functionalities?

SVG to React Component Transformation

This feature allows the conversion of SVG markup into a React component. The transform function takes the SVG code, optional configuration options, and settings for the component name, then outputs JSX code.

import { transform } from '@svgr/core';

const svgCode = '<svg><path d="M10 10 H 90 V 90 H 10 L 10 10"/></svg>';
const jsxCode = transform(svgCode, { icon: true }, { componentName: 'MyIcon' });
console.log(jsxCode);

Custom Template Usage

This feature allows developers to use a custom template for transforming SVG into a React component. It provides flexibility in how the resulting JSX is structured and exported.

import { transform } from '@svgr/core';

const svgCode = '<svg><path d="M10 10 H 90 V 90 H 10 L 10 10"/></svg>';
const customTemplate = ({ template }, opts, { imports, componentName, props, jsx, exports }) => template.ast`
  import * as React from 'react';
  const \
${componentName} = (props) => <svg {...props}>${jsx}</svg>;
  export default ${componentName};
`;
const jsxCode = transform(svgCode, { template: customTemplate }, { componentName: 'MyCustomIcon' });
console.log(jsxCode);

Other packages similar to @svgr/core

react-svg-loader

react-svg-loader is similar to @svgr/core as it also converts SVGs into React components. However, it is implemented as a webpack loader, which integrates directly into webpack's build process, unlike @svgr/core which can be used as a standalone package or within different build tools.

vue-svg-loader

While vue-svg-loader serves a similar purpose for Vue.js applications by converting SVGs into Vue components, it is analogous to @svgr/core's functionality for React. This shows the adaptability of SVG-to-component transformation across different frameworks.

README

@svgr/core

Node API of SVGR.

npm install @svgr/core

Usage

import { transform } from '@svgr/core'

const svgCode = `
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="10" y="10" height="100" width="100"
    style="stroke:#ff0000; fill: #0000ff"/>
</svg>
`

transform(svgCode, { icon: true }, { componentName: 'MyComponent' }).then(
  (jsCode) => {
    console.log(jsCode)
  },
)

Use svgr.sync(code, config, state) if you would like to use sync version.

Plugins

By default @svgr/core doesn't include svgo and prettier plugins, if you want them, you have to install them and include them in config.

svgr(svgCode, {
  plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx', '@svgr/plugin-prettier'],
}).then((jsCode) => {
  console.log(jsCode)
})

License

MIT