Skip to content

Instantly share code, notes, and snippets.

@sbadulin

sbadulin/gist:7871e19235cc30f38313d07463dab0f2

Created July 17, 2019 15:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sbadulin/7871e19235cc30f38313d07463dab0f2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sbadulin/7871e19235cc30f38313d07463dab0f2 to your computer and use it in GitHub Desktop.
Download ZIP
SVGR custom template
Raw
gistfile1.txt
function iconTemplate({ template }, opts, { imports, componentName, props, jsx }) {
const typeScriptTpl = template.smart({ plugins: ['typescript'] });
return typeScriptTpl.ast`
${imports}
import styled, { css } from 'styled-components';
const SvgIcon = (${props}: React.SVGProps<SVGSVGElement>) => (props => ${jsx})({className: props.className});
const ${componentName} = styled(SvgIcon)([],
({ theme, fill, width }) => css\`
width: \${width || theme.sizes.width};
height: \${width || theme.sizes.width};
fill: \${fill || theme.colors.fillColor};
\`
);
export default ${componentName};
`;
}
module.exports = iconTemplate;
@sbadulin
Copy link
Author

sbadulin commented Jun 16, 2020

Great! Also check this article https://varun.ca/react-icon-system/

@distillery-david-rearte
Copy link

distillery-david-rearte commented Jun 16, 2020

nice post, but I think it's easier to use webpack plugin in order to apply this custom template with normal imports like

import FacebookIcon from 'components/shared/icons/FacebookIcon.svg';

and that is transparent for every one in the project. Generate a folder with react components is unnecessary unless you require super weird behavior.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment