Releases: svg/svgo-components
Releases · svg/svgo-components
v0.4.0
v0.3.1
v0.3.0
This is a big release. We added custom targets support and react-native-svg target
Generating import
Templates get components field in options with the list of capitalized tags to generate import
`
import {${components.join(', ')}} from 'react-native-svg'
`Custom target
Target option now accepts custom value which prevents tags and attributes from transforming (for example clip-path -> clipPath). This allows to pass own SVGO plugin with transformation for your own renderer.
const yourFrameworkTargetPlugin = {
type: "visitor",
name: "svgo-jsx-your-framework",
fn: () => {
const yourFrameworkTags = {
svg: "Svg"
}
const yourFrameworkAttributes = {
"xlink:href": "xlinkHref"
}
return {
element: {
enter: (node) => {
node.name = yourFrameworkTags[node.name] ?? node.name;
// attributes recreation is used to preserve order
const newAttributes = {};
for (const [name, value] of Object.entries(node.attributes)) {
newAttributes[yourFrameworkAttributes[name] ?? name] = value;
}
node.attributes = newAttributes;
},
},
};
},
};
export const config = {
...
plugins: [
{
name: "preset-default",
params: {
overrides: {
removeViewBox: false,
},
},
},
{ name: "removeXMLNS" },
{ name: "prefixIds" },
yourFrameworkTargetPlugin
]
};React-native-svg
Based on features above we built support for react-native via react-native-svg package.
export const config = {
target: 'react-native-svg'
}Template customization is simple enough
`// Generated from ${sourceFile}
import {${components.join(", ")}} from 'react-native-svg'
export const ${componentName} = (props) => {
return (
${jsx}
);
}
`Thanks to @jeetiss for suggestion and review!
Contributors
jeetiss
