common.mjs 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. import { iconToHTML } from '../svg/html.mjs';
  2. import { calculateSize } from '../svg/size.mjs';
  3. import { svgToURL } from '../svg/url.mjs';
  4. import { makeViewBoxSquare } from '../icon/square.mjs';
  5. import { iconToSVG } from '../svg/build.mjs';
  6. import '../icon/defaults.mjs';
  7. import '../customisations/defaults.mjs';
  8. import '../svg/defs.mjs';
  9. function getCommonCSSRules(options) {
  10. const result = {
  11. display: "inline-block",
  12. width: "1em",
  13. height: "1em"
  14. };
  15. const varName = options.varName;
  16. if (options.pseudoSelector) {
  17. result["content"] = "''";
  18. }
  19. switch (options.mode) {
  20. case "background":
  21. if (varName) {
  22. result["background-image"] = "var(--" + varName + ")";
  23. }
  24. result["background-repeat"] = "no-repeat";
  25. result["background-size"] = "100% 100%";
  26. break;
  27. case "mask":
  28. result["background-color"] = "currentColor";
  29. if (varName) {
  30. result["mask-image"] = result["-webkit-mask-image"] = "var(--" + varName + ")";
  31. }
  32. result["mask-repeat"] = result["-webkit-mask-repeat"] = "no-repeat";
  33. result["mask-size"] = result["-webkit-mask-size"] = "100% 100%";
  34. break;
  35. }
  36. return result;
  37. }
  38. function generateItemCSSRules(icon, options) {
  39. const result = {};
  40. const varName = options.varName;
  41. const buildResult = iconToSVG(icon);
  42. let viewBox = buildResult.viewBox;
  43. if (viewBox[2] !== viewBox[3]) {
  44. if (options.forceSquare) {
  45. viewBox = makeViewBoxSquare(viewBox);
  46. } else {
  47. result["width"] = calculateSize("1em", viewBox[2] / viewBox[3]);
  48. }
  49. }
  50. const svg = iconToHTML(
  51. buildResult.body.replace(/currentColor/g, options.color || "black"),
  52. {
  53. viewBox: `${viewBox[0]} ${viewBox[1]} ${viewBox[2]} ${viewBox[3]}`,
  54. width: `${viewBox[2]}`,
  55. height: `${viewBox[3]}`
  56. }
  57. );
  58. const url = svgToURL(svg);
  59. if (varName) {
  60. result["--" + varName] = url;
  61. } else {
  62. switch (options.mode) {
  63. case "background":
  64. result["background-image"] = url;
  65. break;
  66. case "mask":
  67. result["mask-image"] = result["-webkit-mask-image"] = url;
  68. break;
  69. }
  70. }
  71. return result;
  72. }
  73. function generateItemContent(icon, options) {
  74. const buildResult = iconToSVG(icon);
  75. const viewBox = buildResult.viewBox;
  76. const height = options.height;
  77. const width = options.width ?? calculateSize(height, viewBox[2] / viewBox[3]);
  78. const svg = iconToHTML(
  79. buildResult.body.replace(/currentColor/g, options.color || "black"),
  80. {
  81. viewBox: `${viewBox[0]} ${viewBox[1]} ${viewBox[2]} ${viewBox[3]}`,
  82. width: width.toString(),
  83. height: height.toString()
  84. }
  85. );
  86. return svgToURL(svg);
  87. }
  88. export { generateItemCSSRules, generateItemContent, getCommonCSSRules };