TEMPLATE – react

[Hiswe]

I think I should be able to provide a template for generating React components.

Right now it's easy to make a component referencing the svg-symbols:

import React  from 'react';
import classNames from 'classnames';
import PropTypes  from 'prop-types';

const BASE_CLASS = `svg-icon`

export function Icon( props ) {
  const { svgId, className, ...other } = props
  const COMP_CLASS = classNames( BASE_CLASS, `icon-${ svgId }`, className )
  return (
    <svg
      role="img"
      className={ COMP_CLASS }
      {...other}
    >
      <use xlinkHref={`#icon-${ svgId }`}></use>
    </svg>
  )
}

Icon.propTypes = {
  svgId: PropTypes.string.isRequired,
}

export default Icon

But we should be able to include the whole SVG for an icon into the DOM. This will allow us to have a more granular styling.

• [ ] should have all the tags & attributes in the JSX way
• [ ] should be able to add custom className & attributes
• [ ] should only rely on React (no classnames or prop-types )
• [ ] optional should be able to able to work with preact
• [ ] optional should be able to specify a zoom factor