Employee Spotlight
From Academia to Industry
Philipp Burckhardt recounts his journey from childhood computer fascinations, to building an e-learning platform at Carnegie Mellon University, and on to his current role at Socket.
@svgr/core
Advanced tools
Package description
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.
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);
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.
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
Node API of SVGR.
npm install @svgr/core
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.
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)
})
MIT
FAQs
Transform SVG into React Components.
We found that @svgr/core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Employee Spotlight
Philipp Burckhardt recounts his journey from childhood computer fascinations, to building an e-learning platform at Carnegie Mellon University, and on to his current role at Socket.
Security News
Git dependencies in open source packages can introduce significant risks, including lack of version control, stability issues, dependency drift, and difficulty in auditing, making them potential targets for supply chain attacks.
Security News
Node.js has added experimental support for TypeScript, a move that highlights the growing importance of TypeScript in modern development.