78 lines
2.3 KiB
Plaintext
78 lines
2.3 KiB
Plaintext
import { iconToHTML } from '../svg/html.mjs';
|
|
import { calculateSize } from '../svg/size.mjs';
|
|
import { svgToURL } from '../svg/url.mjs';
|
|
|
|
function getCommonCSSRules(options) {
|
|
const result = {
|
|
display: "inline-block",
|
|
width: "1em",
|
|
height: "1em"
|
|
};
|
|
const varName = options.varName;
|
|
if (options.pseudoSelector) {
|
|
result["content"] = "''";
|
|
}
|
|
switch (options.mode) {
|
|
case "background":
|
|
if (varName) {
|
|
result["background-image"] = "var(--" + varName + ")";
|
|
}
|
|
result["background-repeat"] = "no-repeat";
|
|
result["background-size"] = "100% 100%";
|
|
break;
|
|
case "mask":
|
|
result["background-color"] = "currentColor";
|
|
if (varName) {
|
|
result["mask-image"] = result["-webkit-mask-image"] = "var(--" + varName + ")";
|
|
}
|
|
result["mask-repeat"] = result["-webkit-mask-repeat"] = "no-repeat";
|
|
result["mask-size"] = result["-webkit-mask-size"] = "100% 100%";
|
|
break;
|
|
}
|
|
return result;
|
|
}
|
|
function generateItemCSSRules(icon, options) {
|
|
const result = {};
|
|
const varName = options.varName;
|
|
if (!options.forceSquare && icon.width !== icon.height) {
|
|
result["width"] = calculateSize("1em", icon.width / icon.height);
|
|
}
|
|
const svg = iconToHTML(
|
|
icon.body.replace(/currentColor/g, options.color || "black"),
|
|
{
|
|
viewBox: `${icon.left} ${icon.top} ${icon.width} ${icon.height}`,
|
|
width: icon.width.toString(),
|
|
height: icon.height.toString()
|
|
}
|
|
);
|
|
const url = svgToURL(svg);
|
|
if (varName) {
|
|
result["--" + varName] = url;
|
|
} else {
|
|
switch (options.mode) {
|
|
case "background":
|
|
result["background-image"] = url;
|
|
break;
|
|
case "mask":
|
|
result["mask-image"] = result["-webkit-mask-image"] = url;
|
|
break;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
function generateItemContent(icon, options) {
|
|
const height = options.height;
|
|
const width = options.width ?? calculateSize(height, icon.width / icon.height);
|
|
const svg = iconToHTML(
|
|
icon.body.replace(/currentColor/g, options.color || "black"),
|
|
{
|
|
viewBox: `${icon.left} ${icon.top} ${icon.width} ${icon.height}`,
|
|
width: width.toString(),
|
|
height: height.toString()
|
|
}
|
|
);
|
|
return svgToURL(svg);
|
|
}
|
|
|
|
export { generateItemCSSRules, generateItemContent, getCommonCSSRules };
|