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

Readme

Source

@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 any plugin, 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

Keywords

FAQs

What is @svgr/core?

Is @svgr/core popular?

Is @svgr/core well maintained?

Last updated on 15 Aug 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