vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
61 lines (60 loc) • 2.02 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Icon = Icon;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _reactFela = require("react-fela");
var _useTheme = require("../../styling/use-theme");
var _sizeToRem = require("../../utils/size-to-rem");
var _iconTypes = require("./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)
*/
function Icon(_ref) {
let {
type,
color = 'primary',
label = '',
...props
} = _ref;
const {
css
} = (0, _reactFela.useFela)();
const theme = (0, _useTheme.useTheme)();
const size = Number(type.split('-').pop());
const hasCustomColor = !_iconTypes.COLORS.includes(color);
const iconSrc = theme.getIcon(type, hasCustomColor ? 'primary' : color);
return /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({}, props, {
width: size,
height: size,
src: iconSrc,
role: label ? undefined : 'presentation',
alt: label,
className: css({
display: 'inline-block',
width: (0, _sizeToRem.pxToRem)(size),
height: (0, _sizeToRem.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.default.string.isRequired,
color: _propTypes.default.string,
label: _propTypes.default.string
};