vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
54 lines • 1.63 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import PropTypes from 'prop-types';
import React from 'react';
import { useFela } from 'react-fela';
import { useTheme } from '../../styling/use-theme';
import { pxToRem } from '../../utils/size-to-rem';
import { COLORS } from './iconTypes';
/**
* @deprecated Use `import { Icon } from '@volvo-cars/react-icons'` instead. See [Icon](https://developer.volvocars.com/design-system/web/?path=/docs/components-icon--docs)
*/
export function Icon(_ref) {
let {
type,
color = 'primary',
label = '',
...props
} = _ref;
const {
css
} = useFela();
const theme = useTheme();
const size = Number(type.split('-').pop());
const hasCustomColor = !COLORS.includes(color);
const iconSrc = theme.getIcon(type, hasCustomColor ? 'primary' : color);
return /*#__PURE__*/React.createElement("img", _extends({}, props, {
width: size,
height: size,
src: iconSrc,
role: label ? undefined : 'presentation',
alt: label,
className: css({
display: 'inline-block',
width: pxToRem(size),
height: pxToRem(size),
// Workaround Chrome bug with SVG <view> rendering
objectFit: 'fill'
},
/**
* The next version of published icons can be colored only using mask-image instead of
* the SVG sprites.
*/
hasCustomColor ? {
objectPosition: -999,
backgroundColor: color,
maskImage: `url(${iconSrc.split('#')[0]})`,
maskRepeat: 'no-repeat'
} : {})
}));
}
Icon.propTypes = {
type: PropTypes.string.isRequired,
color: PropTypes.string,
label: PropTypes.string
};