Skip to content

Instantly share code, notes, and snippets.

@tatarjr
Last active February 2, 2017 08:04
Show Gist options
  • Save tatarjr/02bbfe6606ddf23c708e22fae4cb90de to your computer and use it in GitHub Desktop.
Save tatarjr/02bbfe6606ddf23c708e22fae4cb90de to your computer and use it in GitHub Desktop.
Sample Icon Component
import React from 'react';
const req = require.context('../assets/icons', false, /^\.\/.*\.svg$/);
const GLYPHS = (req.keys()).reduce((glyphs, key) => {
const filename = key.match(new RegExp(/[^/]+(?=\.svg$)/))[0];
return Object.assign({}, glyphs, { [filename]: req(key) });
}, {});
const DEFAULT_CLASS = 'ji-svg';
const Icon = ({ name = '', style = {}, className = '' }) => {
const svgClasses = `${DEFAULT_CLASS} ${className}`;
return (
<svg className={svgClasses} style={style}>
<use xlinkHref={GLYPHS[name]} />
</svg>
);
};
Icon.propTypes = {
name: React.PropTypes.oneOf(Object.keys(GLYPHS)),
style: React.PropTypes.shape(),
className: React.PropTypes.string
};
export default Icon;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment