UNPKG

vcc-ui

Version:

A React library for building user interfaces at Volvo Cars

54 lines 1.63 kB
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 };