drawing-board/src/app/liantong/icon.ts

import { Path } from "konva/lib/shapes/Path";
import { injectPoiType, pathsToActShape } from "../../board";

const svgs = {
  wljg: [
    `M320 512c0 106.032 85.968 192 192 192s192-85.968 192-192-85.968-192-192-192-192 85.968-192 192z m31.36 72h56.784c9.536 40.384 26.848 73.936 48.768 95.2a176.528 176.528 0 0 1-105.552-95.2z m-6.272-16A175.824 175.824 0 0 1 336 512c0-19.584 3.2-38.4 9.104-56h59.728A321.008 321.008 0 0 0 400 512c0 19.488 1.696 38.288 4.832 56H345.12z m6.272-128a176.528 176.528 0 0 1 105.552-95.2c-21.92 21.264-39.232 54.816-48.768 95.2h-56.8z m69.744 16H602.88c3.296 17.536 5.104 36.352 5.104 56 0 19.648-1.808 38.464-5.104 56H421.104A303.776 303.776 0 0 1 416 512c0-19.648 1.808-38.464 5.104-56z m178.288-16H424.608c5.312-21.152 12.88-40.032 22.016-55.696C465.456 352 489.12 336 512 336c22.88 0 46.544 16 65.376 48.304 9.152 15.68 16.704 34.544 22.016 55.696z m19.776 16h59.728c5.92 17.6 9.104 36.416 9.104 56 0 19.584-3.2 38.4-9.104 56h-59.728c3.136-17.712 4.832-36.512 4.832-56s-1.696-38.288-4.832-56z m53.472-16h-56.784c-9.536-40.384-26.848-73.936-48.768-95.2 47.12 15.52 85.44 50.384 105.552 95.2z m0 144a176.528 176.528 0 0 1-105.552 95.2c21.92-21.264 39.232-54.816 48.768-95.2h56.8z m-73.248 0c-5.312 21.152-12.88 40.032-22.016 55.696C558.544 672 534.88 688 512 688c-22.88 0-46.544-16-65.376-48.304-9.152-15.68-16.704-34.544-22.016-55.696h174.784z`,
    `M80 176v672h864V176H80z m848 16v640H96V192h832z`,
    `M32 128v768h960V128H32z m16 16h928v736H48V144z`,
  ],
  bzjg: [
    `M80 848V176h864v672H80z m16-656v640h832V192H96z`,
    `M32 896V128h960v768H32zM48 144v736h928V144H48z`,
  ],
  kjg: [
    `M515.056 328.608a8 8 0 0 1 2.608 1.728l160 160a8 8 0 0 1-11.328 11.328L520 355.312V688a8 8 0 0 1-16 0V355.312l-146.336 146.352a8 8 0 0 1-11.328-11.328l160-160A8 8 0 0 1 512 328M512.048 328a8 8 0 0 1 3.008 0.608z`,
    `M80 848V176h864v672H80z m16-656v640h832V192H96z`,
    `M32 896V128h960v768H32zM48 144v736h928V144H48z`,
  ],
  bgsjg: [
    `M144 240h16v15.104h-0.672V256H144v-16zM144 768v16h16v-15.104h-0.672V768H144zM864 784h16v-16h-15.328v0.896H864V784zM880 256v-16h-16v15.104h0.672V256H880zM190 240v16h30.672v-16h-30.672zM251.328 240v16h30.672v-16h-30.672zM312.672 240v16h30.656v-16h-30.656zM374 240v16h30.672v-16h-30.672zM435.328 240v16h30.672v-16h-30.672zM496.672 240v16h30.656v-16h-30.656zM558 240v16h30.672v-16h-30.672zM619.328 240v16h30.672v-16h-30.672zM680.672 240v16h30.656v-16h-30.656zM742 240v16h30.672v-16h-30.672zM803.328 240v16h30.672v-16h-30.672zM880 285.328h-16v30.24h16v-30.24zM880 345.776h-16V376h16v-30.224zM880 406.224h-16v30.224h16v-30.24zM880 466.672h-16v30.224h16v-30.24zM880 527.104h-16v30.24h16v-30.24zM880 587.552h-16v30.24h16v-30.24zM880 648h-16v30.224h16V648zM880 708.448h-16v30.224h16v-30.24zM834 784v-16h-30.672v16h30.672zM772.672 784v-16h-30.672v16h30.672zM711.328 784v-16h-30.656v16h30.656zM650 784v-16h-30.672v16h30.672zM588.672 784v-16h-30.672v16h30.672zM527.328 784v-16h-30.656v16h30.656zM466 784v-16h-30.672v16h30.672zM404.672 784v-16h-30.672v16h30.672zM343.328 784v-16h-30.656v16h30.656zM282 784v-16h-30.672v16h30.672zM220.672 784v-16h-30.672v16h30.672zM144 738.672h16v-30.24H144v30.24zM144 678.224h16V648H144v30.224zM144 617.776h16v-30.224H144v30.24zM144 557.328h16v-30.224H144v30.24zM144 496.896h16v-30.24H144v30.24zM144 436.448h16v-30.24H144v30.24zM144 376h16v-30.224H144V376zM144 315.552h16v-30.224H144v30.24zM434.048 497.808v-34.72h155.68v29.344h16.8V447.84h-80.416c-3.152-8.064-8.96-19.712-13.664-28.448l-17.248 4.928c3.584 6.944 7.616 15.904 10.976 23.52h-88.48v49.952h16.336z`,
    `M536.64 477.2l-10.528 10.752c22.848 11.872 53.088 29.344 67.872 40.096l10.96-12.768c-15.68-10.528-46.128-27.328-68.32-38.08zM419.712 515.728l9.856 14.336c25.968-11.2 50.4-28 68.096-43.68l-11.424-9.856c-17.264 14.784-40.096 29.792-66.544 39.2zM606.752 602.4h-86.464v-56.208h63.84v-15.232H440.96v15.232h62.048v56.224h-85.12v15.456h188.848v-15.456z`,
    `M32 128v768h960V128H32z m944 16v736H48V144h928z`,
  ],
};

for (const key in svgs) {
  injectPoiType(key, () => {
    const svgAct = pathsToActShape({
      paths: svgs[key],
      size: [1000, 800],
      realWidth: 100,
      offset: [0, 100],
      strokeWidth: 5,
      fixed: true,
      strokeColor: "#000000",
    });

    const paths = svgAct.shape.find<Path>(".path");
    return {
      ...svgAct,
      draging() {
        paths.forEach((path) => {
          path.fill("#e0403c");
        });
      },
      active() {
        paths.forEach((path) => {
          path.fill("red");
        });
      },
    };
  });
}