Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@svgr/core
Advanced tools
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.
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 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)
})
MIT
FAQs
Transform SVG into React Components.
The npm package @svgr/core receives a total of 6,662,316 weekly downloads. As such, @svgr/core popularity was classified as popular.
We found that @svgr/core demonstrated a not healthy version release cadence and project activity because the last version was released 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.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.