PR: Library: V2: Icons: Issues: move out from core (#9047)

build-scripts/survey-angular/tsconfig.typing.angular.json

@@ -12,6 +12,12 @@
     "paths": {
       "survey-core": [
         "../../src/entries/core.ts"
+      ],
+      "@coreIconsV1": [
+        "../../packages/survey-core/src/iconsV1"
+      ],
+      "@coreIconsV2": [
+        "../../packages/survey-core/src/iconsV2"
       ]
     },
     "sourceMap": false,

build-scripts/survey-core/tsconfig.icons.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "survey-core": [
+        "../../build/survey-core"
+      ]
+    },
+    "declaration": true,
+    "declarationDir": "../../build/survey-core/icons/"
+  },
+  "include": [
+    "../../packages/survey-core/src/iconsV1.ts",
+    "../../packages/survey-core/src/iconsV2.ts",
+  ],
+  "exclude": [],
+}

build-scripts/survey-core/webpack.icons.config.js

@@ -0,0 +1,30 @@
+"use strict";
+
+const webpackCommonConfigCreator = require("../webpack.common");
+const { merge } = require("webpack-merge");
+var FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
+var path = require("path");
+
+const config = {
+  entry: {
+    "iconsV1": path.resolve(__dirname, "../../packages/survey-core/src/iconsV1.ts"),
+    "iconsV2": path.resolve(__dirname, "../../packages/survey-core/src/iconsV2.ts"),
+  },
+  plugins: [new FixStyleOnlyEntriesPlugin()],
+  externals: {
+    "survey-core": {
+      root: "Survey",
+      commonjs2: "survey-core",
+      commonjs: "survey-core",
+      amd: "survey-core"
+    }
+  }
+};
+
+module.exports = function (options) {
+  options.platform = "";
+  options.libraryName = "SurveyIcons";
+  options.tsConfigFile = path.resolve(__dirname, "./tsconfig.icons.json")
+
+  return merge(webpackCommonConfigCreator(options, { "name": "survey-icons" }, "survey.icons", "survey-core/icons"), config);
+};

build-scripts/survey-jquery-ui/tsconfig.typing.jquery-ui.json

@@ -12,6 +12,12 @@
     "paths": {
       "survey-core": [
         "../../build/survey-core"
+      ],
+      "@coreIconsV1": [
+        "../../build/survey-core/icons/iconsV1"
+      ],
+      "@coreIconsV2": [
+        "../../build/survey-core/icons/iconsV2"
       ]
     },
     "sourceMap": false,

build-scripts/survey-jquery/tsconfig.typing.jquery.json

@@ -12,6 +12,12 @@
     "paths": {
       "survey-core": [
         "../../src/entries/core.ts"
+      ],
+      "@coreIconsV1": [
+        "../../packages/survey-core/src/iconsV1"
+      ],
+      "@coreIconsV2": [
+        "../../packages/survey-core/src/iconsV2"
       ]
     },
     "sourceMap": false,

build-scripts/survey-js-ui/tsconfig.json

@@ -6,6 +6,12 @@
       "survey-core": [
         "../../build/survey-core"
       ],
+      "@coreIconsV1": [
+        "../../build/survey-core/icons/iconsV1"
+      ],
+      "@coreIconsV2": [
+        "../../build/survey-core/icons/iconsV2"
+      ]
     },
     "declaration": true,
     "declarationDir": "../../build/survey-js-ui/typings",

build-scripts/survey-knockout-ui/tsconfig.typing.ko-ui.json

@@ -12,6 +12,12 @@
     "paths": {
       "survey-core": [
         "../../build/survey-core"
+      ],
+      "@coreIconsV1": [
+        "../../build/survey-core/icons/iconsV1"
+      ],
+      "@coreIconsV2": [
+        "../../build/survey-core/icons/iconsV2"
       ]
     },
     "sourceMap": false,

build-scripts/survey-knockout/tsconfig.typing.ko.json

@@ -12,6 +12,12 @@
     "paths": {
       "survey-core": [
         "../../src/entries/core.ts"
+      ],
+      "@coreIconsV1": [
+        "../../packages/survey-core/src/iconsV1"
+      ],
+      "@coreIconsV2": [
+        "../../packages/survey-core/src/iconsV2"
       ]
     },
     "sourceMap": false,

build-scripts/survey-react-ui/tsconfig.json

@@ -6,6 +6,12 @@
     "paths": {
       "survey-core": [
         "../../build/survey-core"
+      ],
+      "@coreIconsV1": [
+        "../../build/survey-core/icons/iconsV1"
+      ],
+      "@coreIconsV2": [
+        "../../build/survey-core/icons/iconsV2"
       ]
     },
     "declaration": true,

build-scripts/survey-react/tsconfig.typing.react.json

@@ -12,6 +12,12 @@
     "paths": {
       "survey-core": [
         "../../src/entries/core.ts"
+      ],
+      "@coreIconsV1": [
+        "../../packages/survey-core/src/iconsV1"
+      ],
+      "@coreIconsV2": [
+        "../../packages/survey-core/src/iconsV2"
       ]
     },
     "sourceMap": false,

build-scripts/survey-vue-ui/tsconfig.typing.vue-ui.json

@@ -12,6 +12,12 @@
     "paths": {
       "survey-core": [
         "../../build/survey-core"
+      ],
+      "@coreIconsV1": [
+        "../../build/survey-core/icons/iconsV1"
+      ],
+      "@coreIconsV2": [
+        "../../build/survey-core/icons/iconsV2"
       ]
     },
     "types": [

build-scripts/survey-vue/tsconfig.typing.vue.json

@@ -12,6 +12,12 @@
     "paths": {
       "survey-core": [
         "../../src/entries/core.ts"
+      ],
+      "@coreIconsV1": [
+        "../../packages/survey-core/src/iconsV1"
+      ],
+      "@coreIconsV2": [
+        "../../packages/survey-core/src/iconsV2"
       ]
     },
     "types": [

build-scripts/tsconfig.json

@@ -2,15 +2,33 @@
   "compilerOptions": {
     "target": "es5",
     "module": "es2015",
-    "lib": ["DOM", "ES5", "ES6", "ES2015.Promise"],
+    "lib": [
+      "DOM",
+      "ES5",
+      "ES6",
+      "ES2015.Promise"
+    ],
     "sourceMap": true,
     "noImplicitAny": true,
     "importHelpers": false,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
-    "jsx": "react"
+    "jsx": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@coreIconsV1": [
+        "../build/survey-core/icons/iconsV1.d.ts"
+      ],
+      "@coreIconsV2": [
+        "../build/survey-core/icons/iconsV2.d.ts"
+      ]
+    }
   },
-  "exclude": ["../src/entries/**/*.ts"],
-  "include": ["../src/**/*.ts"]
-}
+  "exclude": [
+    "../src/entries/**/*.ts"
+  ],
+  "include": [
+    "../src/**/*.ts"
+  ]
+}

build-scripts/tsconfig.tests.json

@@ -7,6 +7,12 @@
       "survey-core": [
         "../src/entries/core.ts"
       ],
+      "@coreIconsV1": [
+        "../packages/survey-core/src/iconsV1"
+      ],
+      "@coreIconsV2": [
+        "../packages/survey-core/src/iconsV2"
+      ],
       "@legacy/*": [
         "../src/*"
       ]

build-scripts/webpack.common.js

@@ -123,6 +123,10 @@ module.exports = function (options, packageJson, chunkName, buildFolderName) {
     resolve: {
       extensions: [".ts", ".js", ".tsx", ".scss"],
       plugins: [new TsconfigPathsPlugin({ configFile: options.tsConfigFile || "./tsconfig.json" })],
+      alias: {
+        "@coreIconsV1": path.resolve(__dirname, "../build/survey-core/icons/iconsV1.js"),
+        "@coreIconsV2": path.resolve(__dirname, "../build/survey-core/icons/iconsV2.js"),
+      },
     },
     optimization: {
       minimize: isProductionBuild,

package.json

@@ -55,13 +55,16 @@
     "build_react_ui": "webpack --config ./build-scripts/survey-react-ui/webpack.config.js --env.buildType dev && webpack --config ./build-scripts/survey-react-ui/webpack.config.js --env.buildType prod",
     "build_vue": "npm run build_vue_dev && npm run build_vue_prod",
     "build_vue_ui": "webpack --config ./build-scripts/survey-vue-ui/webpack.config.js --env.buildType dev && webpack --config ./build-scripts/survey-vue-ui/webpack.config.js --env.buildType prod",
-    "build_core": "npm run build_core_dev && npm run build_core_prod && npm run build-themes && rimraf build/survey-core/ts3.4 && downlevel-dts build/survey-core build/survey-core/ts3.4",
+    "build_core": "npm run build_core_dev && npm run build_core_prod && npm run build-themes && npm run build-icons && rimraf build/survey-core/ts3.4 && downlevel-dts build/survey-core build/survey-core/ts3.4",
     "build-plugins": "npm run build-plugins-dev && npm run build-plugins-prod",
     "build-plugins-dev": "concurrently \"webpack --config ./build-scripts/survey-core/webpack.plugins.bootstrap.config.js --env.buildType dev\" \"webpack --config ./build-scripts/survey-core/webpack.plugins.bootstrap.material.config.js --env.buildType dev\"",
     "build-plugins-prod": "concurrently \"webpack --config ./build-scripts/survey-core/webpack.plugins.bootstrap.config.js --env.buildType prod\" \"webpack --config ./build-scripts/survey-core/webpack.plugins.bootstrap.material.config.js --env.buildType prod\"",
     "build-themes": "npm run build-themes-dev && npm run build-themes-prod",
     "build-themes-dev": "webpack --config ./build-scripts/survey-core/webpack.themes.config.js --env.buildType dev",
     "build-themes-prod": "webpack --config ./build-scripts/survey-core/webpack.themes.config.js --env.buildType prod",
+    "build-icons": "npm run build-icons-dev && npm run build-icons-prod",
+    "build-icons-dev": "webpack --config ./build-scripts/survey-core/webpack.icons.config.js --env.buildType dev",
+    "build-icons-prod": "webpack --config ./build-scripts/survey-core/webpack.icons.config.js --env.buildType prod",
     "build_i18n": "npm run build_i18n_dev && npm run build_i18n_prod",
     "build_jquery": "npm run build_jquery_dev && npm run build_jquery_prod",
     "build_jquery_ui": "npm run build_jquery_ui_dev && npm run build_jquery_ui_prod",

packages/survey-angular-ui/src/survey.component.ts

@@ -1,6 +1,13 @@
 import { ChangeDetectorRef, Component, Input } from "@angular/core";
-import { SurveyModel } from "survey-core";
+import { SurveyModel, SvgRegistry, addIconsToThemeSet } from "survey-core";
 import { BaseAngular } from "./base-angular";
+
+import { icons as iconsV1 } from "survey-core/icons/iconsV1";
+import { icons as iconsV2 } from "survey-core/icons/iconsV2";
+addIconsToThemeSet("v1", iconsV1);
+addIconsToThemeSet("v2", iconsV2);
+
+SvgRegistry.registerIcons(iconsV1);
 @Component({
   selector: "survey",
   template: "<sv-ng-modal-container></sv-ng-modal-container><survey-content [model]='model'></survey-content>"

packages/survey-angular-ui/src/svgbundle.component.ts

@@ -1,13 +1,23 @@
 import { SvgRegistry } from "survey-core";
-import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from "@angular/core";
 @Component({
   selector: "sv-svg-bundle",
   template: "<svg id='sv-icon-holder-global-container' #svgContainer></svg>",
   styles: [":host { display: none; }"]
 })
-export class SvgBundleComponent implements OnInit {
+export class SvgBundleComponent implements OnInit, OnDestroy {
   @ViewChild("svgContainer", { static: true }) svgContainer!: ElementRef<SVGElement>;
+  private onIconsChanged = () => {
+    if (!!this.svgContainer?.nativeElement) {
+      this.svgContainer.nativeElement.innerHTML = SvgRegistry.iconsRenderedHtml();
+    }
+  }
   ngOnInit(): void {
-    this.svgContainer.nativeElement.innerHTML = SvgRegistry.iconsRenderedHtml();
+    this.onIconsChanged();
+    SvgRegistry.onIconsChanged.add(this.onIconsChanged);
+  }
+  ngOnDestroy(): void {
+    SvgRegistry.onIconsChanged.remove(this.onIconsChanged);
   }
+
 }

packages/survey-core/src/iconsV1.ts

@@ -0,0 +1,8 @@
+const path = (require as any).context("./images-v1/", true, /\.svg$/);
+
+const icons: { [index: string]: string } = {};
+path.keys().forEach((key: string) => {
+  icons[key.substring(2, key.length - 4).toLowerCase()] = path(key);
+});
+
+export { icons };

packages/survey-core/src/iconsV2.ts

@@ -0,0 +1,8 @@
+const path = (require as any).context("./images-v2/", true, /\.svg$/);
+
+const icons: { [index: string]: string } = {};
+path.keys().forEach((key: string) => {
+  icons[key.substring(2, key.length - 4).toLowerCase()] = path(key);
+});
+
+export { icons };

packages/survey-core/src/settings.ts

@@ -827,5 +827,4 @@ export var settings = {
    * @see [settings.serialization](https://surveyjs.io/form-library/documentation/api-reference/settings#serialization)
    */
   parseNumber: (stringValue: any, numericValue: number): number => { return numericValue; },
-  useLegacyIcons: true
 };

packages/survey-core/src/survey.ts

@@ -83,7 +83,6 @@ import { SurveyTaskManagerModel } from "./surveyTaskManager";
 import { ProgressButtons } from "./progress-buttons";
 import { TOCModel } from "./surveyToc";
 import { DomDocumentHelper, DomWindowHelper } from "./global_variables_utils";
-import { svgBundle, SvgRegistry } from "./svgbundle";
 
 /**
  * The `SurveyModel` object contains properties and methods that allow you to control the survey and access its elements.
@@ -1078,7 +1077,6 @@ export class SurveyModel extends SurveyElementCore
     });
 
     this.locTitle.onStringChanged.add(() => this.titleIsEmpty = this.locTitle.isEmpty);
-    this.registerIcons();
   }
 
   processClosedPopup(question: IQuestion, popupModel: PopupModel<any>): void {
@@ -7996,16 +7994,6 @@ export class SurveyModel extends SurveyElementCore
     }
   }
   public questionErrorComponent = "sv-question-error";
-
-  protected registerIcons() {
-    let path;
-    if (settings.useLegacyIcons) {
-      path = svgBundle.V1;
-    } else {
-      path = svgBundle.V2;
-    }
-    SvgRegistry.registerIconsFromFolder(path);
-  }
 }
 
 function isStrCiEqual(a: string, b: string) {