InlineSvgIconWidget

Source

index.js
import React from 'react';
import PropTypes from 'prop-types';

// Note the default icon uses the viewBox attribute to create a coordinate system,
// but does not specify height or width attributes on the svg element itself. This
// allows us to size the icon with the height/width props provided to this component.
// Additionally, not providing any attributes controlling final appearance allows
// external control of those features using CSS.
const defaultIcon =
'<svg viewBox="0 0 30 30"><path d="m 5 5 l 5 25 l 25 25 l 25 5 z"/></svg>';

function validateSvgString(svgString) {
// We could do more validation here, but at least make sure we didn't
// get null, undefined, or the empty string.
return !!svgString;
}

/* eslint-disable react/no-danger */
export default function render(props) {
if (!validateSvgString(props.icon)) {
console.log(
`InlineSvgIconWidget won't render, invalid icon property: ${props.icon}`
);
return null;
}

const style = Object.assign({}, props.style, {
width: props.width,
height: props.height,
});

return (
<div
style={style}
className={props.className}
onClick={props.onClick}
dangerouslySetInnerHTML={{ __html: props.icon }}
/>
);
}
/* eslint-enable react/no-danger */

render.propTypes = {
className: PropTypes.string,
height: PropTypes.string,
icon: PropTypes.string,
width: PropTypes.string,
style: PropTypes.object,
onClick: PropTypes.func,
};

render.defaultProps = {
className: '',
icon: defaultIcon,
style: {},
width: undefined,
height: undefined,
onClick: undefined,
};