@realfavicongenerator/generate-favicon
Version:
Generate a favicon
89 lines (87 loc) • 3.81 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.combineLightAndDaskModeDesktopIcons = exports.cloneSvg = exports.createFilteredSvgIcon = exports.createDesktopSvgIcon = void 0;
const helper_1 = require("../icon/helper");
const desktop_1 = require("../icon/desktop");
const _1 = require(".");
const createDesktopSvgIcon = (masterIcon, settings, imageAdapter) => {
// No transformation and no dark icon variant: return the icon as-is
if (!(0, desktop_1.hasDarkIcon)(settings) && settings.regularIconTransformation.type === helper_1.IconTransformationType.None) {
return (0, exports.cloneSvg)(masterIcon.icon, imageAdapter);
}
// Special case for icons that only play with brightness or color inversion
if ((
// This optimization is possible when there is only a single icon to work on
settings.darkIconType !== 'specific')
&&
((0, helper_1.isCSSFilterTransformation)(settings.regularIconTransformation.type) ||
settings.regularIconTransformation.type === helper_1.IconTransformationType.None)
&&
(!(0, desktop_1.hasDarkIcon)(settings) ||
(0, helper_1.isCSSFilterTransformation)(settings.darkIconTransformation.type) ||
settings.darkIconTransformation.type === helper_1.IconTransformationType.None)) {
return (0, exports.createFilteredSvgIcon)(masterIcon.icon, imageAdapter, settings.regularIconTransformation, (0, desktop_1.hasDarkIcon)(settings) ? settings.darkIconTransformation : undefined);
}
const lightIcon = (0, helper_1.transformSvg)(masterIcon.icon, settings.regularIconTransformation, imageAdapter);
// No dark icon? Done!
if (!(0, desktop_1.hasDarkIcon)(settings)) {
return lightIcon;
}
const darkIcon = (0, helper_1.transformSvg)(masterIcon.darkIcon || masterIcon.icon, settings.darkIconTransformation, imageAdapter);
return (0, exports.combineLightAndDaskModeDesktopIcons)(lightIcon, darkIcon, imageAdapter);
};
exports.createDesktopSvgIcon = createDesktopSvgIcon;
const createFilteredSvgIcon = (image, imageAdapter, lightSettings, darkSettings) => {
const icon = (0, exports.cloneSvg)(image, imageAdapter);
if (!lightSettings && !darkSettings) {
return icon;
}
let styles = '';
if (lightSettings) {
const lightFilter = (0, helper_1.getCSSFilter)(lightSettings);
styles += `@media (prefers-color-scheme: light) { :root { filter: ${lightFilter}; } }\n`;
}
if (darkSettings) {
const darkFilter = (0, helper_1.getCSSFilter)(darkSettings);
styles += `@media (prefers-color-scheme: dark) { :root { filter: ${darkFilter}; } }\n`;
}
const style = icon.style();
style.addText(styles);
icon.add(style);
return icon;
};
exports.createFilteredSvgIcon = createFilteredSvgIcon;
const cloneSvg = (svg, imageAdapter) => {
const svgString = svg.svg();
return (0, _1.stringToSvg)(svgString, imageAdapter);
};
exports.cloneSvg = cloneSvg;
const combineLightAndDaskModeDesktopIcons = (lightIcon, darkIcon, imageAdapter) => {
const s = imageAdapter.createSvg().size(1000, 1000);
const style = s.style();
style.addText(`
#light-icon {
display: inline;
}
#dark-icon {
display: none;
}
@media (prefers-color-scheme: dark) {
#light-icon {
display: none;
}
#dark-icon {
display: inline;
}
}
`);
s.add(style);
const lightGroup = s.group();
lightGroup.id('light-icon');
lightGroup.svg(lightIcon.svg());
const darkGroup = s.group();
darkGroup.id('dark-icon');
darkGroup.svg(darkIcon.svg());
return s;
};
exports.combineLightAndDaskModeDesktopIcons = combineLightAndDaskModeDesktopIcons;