Add below script to your package.json:
+ "icons:create": "svgr ./assets/icons -d ./src/components/Icons --config-file svgr-config.json --template svg-template.js",
const comments = ` | |
// Auto-generated file created by svgr-cli source svg-template.js | |
// Run yarn icons:create to update | |
// Do not edit | |
`; | |
const getAttributeValue = (jsx, name) => { | |
return jsx.find(e => { | |
return e.name.name === name; | |
}); | |
}; | |
const template = (variables, {tpl}) => { | |
const viewBoxAttr = getAttributeValue(variables.jsx.openingElement.attributes, 'viewBox'); | |
const [, , zoomWidth, zoomHeight] = viewBoxAttr.value.value.split(' '); | |
const aspectRatio = String(zoomWidth / zoomHeight); | |
return tpl` | |
${comments} | |
${variables.imports}; | |
import {ColorValue} from 'react-native'; | |
${variables.interfaces}; | |
interface IIcon extends SvgProps { | |
size?: string | number; | |
secondaryColor?: ColorValue; | |
}; | |
const ${variables.componentName} = (props: IIcon) => { | |
const aspectRatio = ${aspectRatio}; | |
return (${variables.jsx}); | |
}; | |
${variables.exports}; | |
`; | |
}; | |
module.exports = template; |
{ | |
"typescript": true, | |
"native": true, | |
"replaceAttrValues": { | |
"white": "{props.color || '#FFFFFF'}", | |
"#FFF": "{props.color || '#FFFFFF'}", | |
"#FFFFFF": "{props.color || '#FFFFFF'}", | |
"#fff": "{props.color || '#FFFFFF'}", | |
"#ffffff": "{props.color || '#FFFFFF'}", | |
"black": "{props.color || '#000000'}", | |
"#000": "{props.color || '#000000'}", | |
"#000000": "{props.color || '#000000'}", | |
"currentColor": "{props.color || '#000000'}", | |
"red": "{props.secondaryColor || '#FF0000'}", | |
"#f00": "{props.secondaryColor || '#FF0000'}", | |
"#ff0000": "{props.secondaryColor || '#FF0000'}", | |
"#F00": "{props.secondaryColor || '#FF0000'}", | |
"#FF0000": "{props.secondaryColor || '#FF0000'}" | |
}, | |
"svgProps": { | |
"width": "{props.size || props.width || (props.height && Math.floor(+props.height * aspectRatio)) || 256}", | |
"height": "{props.size || props.height || (props.width && Math.floor(+props.width / aspectRatio)) || 256}" | |
}, | |
"svgoConfig": { | |
"plugins": [ | |
{ | |
"name": "preset-default", | |
"params": { | |
"overrides": { | |
"removeViewBox": false | |
} | |
} | |
}, | |
{ | |
"name": "removeXMLNS", | |
"active": true | |
} | |
] | |
} | |
} |