@redocly/theme
Version:
Shared UI components lib
48 lines • 2.29 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CDNIcon = void 0;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("../../core/utils");
const constants_1 = require("../../core/constants");
const Icon = (props) => {
const { name, type, pack, mode, color } = props, rest = __rest(props, ["name", "type", "pack", "mode", "color"]);
const cdnUrl = constants_1.ICONS_CDN_URL[pack || 'font-awesome'];
const typeSegment = pack === 'code' ? '' : type ? type + '/' : 'regular/';
const styleProps = mode === 'background'
? {
backgroundImage: `url(${cdnUrl}/${typeSegment}${name}.svg)`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
backgroundSize: 'contain',
}
: {
backgroundColor: color ? (0, utils_1.getCssColorVariable)(color) : 'currentColor',
maskImage: `url(${cdnUrl}/${typeSegment}${name}.svg)`,
maskRepeat: 'no-repeat',
maskPosition: 'center',
maskSize: 'contain',
};
return (react_1.default.createElement("svg", Object.assign({}, rest, { style: Object.assign(Object.assign({}, styleProps), { display: 'inline-block', verticalAlign: 'middle' }) })));
};
exports.CDNIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
'data-component-name': 'icons/CDNIcon/CDNIcon',
})) `
height: ${({ size }) => size || 'var(--icon-height, 1em)'};
width: ${({ size }) => size || 'var(--icon-width, 1em)'};
`;
//# sourceMappingURL=CDNIcon.js.map