Merge pull request #11783 from vvlladd28/improvement/material-icons/metadata-updated

Updated material-icons.json metadate

ui-ngx/generate-icon-metadata.js

@@ -0,0 +1,130 @@
+/*
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const materialIconDir = path.join('.', 'src', 'assets', 'metadata');
+const mdiMetadata = path.join('.', 'node_modules', '@mdi', 'svg', 'meta.json');
+
+async function init() {
+  const iconsBundle = JSON.parse(await fs.promises.readFile(path.join(materialIconDir, 'material-icons.json')));
+
+  await getMaterialIconMetadataAndUpdated(iconsBundle);
+  await getMDIMetadataAndUpdated(iconsBundle);
+
+  await fs.promises.writeFile(path.join(materialIconDir, 'material-icons.json'), JSON.stringify(iconsBundle), 'utf8')
+}
+
+async function getMaterialIconMetadataAndUpdated(iconsBundle){
+  const iconsResponse = await fetch('https://fonts.google.com/metadata/icons?key=material_symbols&incomplete=true');
+  const iconsText = await iconsResponse.text();
+  const clearText = iconsText.substring(iconsText.indexOf("\n") + 1);
+
+  const icons = JSON.parse(clearText).icons;
+
+  let prevItem;
+  const filterIcons = icons.filter((item) => {
+    if (prevItem?.name !== item.name && !item.unsupported_families.includes('Material Icons')) {
+      prevItem = item;
+      return true;
+    }
+    return false;
+  });
+
+  filterIcons.forEach((item, index) => {
+    const findItem = iconsBundle.find((el) => el.name === item.name);
+    if (!findItem) {
+      let prevIndexIcon = 0;
+      if (index === 0) {
+        prevIndexIcon = 45;
+      } else {
+        let iteration = 0;
+        while (prevIndexIcon < 45) {
+          iteration++;
+          const prevIconName = filterIcons[index - iteration].name;
+          prevIndexIcon = findPreviousIcon(iconsBundle, prevIconName);
+        }
+      }
+      if (prevIndexIcon >= 0) {
+        iconsBundle.splice(prevIndexIcon + 1, 0, {name:item.name, tags:item.tags});
+      }
+      console.log('Not found icon:', item.name);
+      console.count('Not found material icon');
+      return;
+    }
+    if (JSON.stringify(item.tags) !== JSON.stringify(findItem.tags)) {
+      findItem.tags = item.tags;
+      console.log('Difference tags in', item.name);
+      console.count('Difference tags in material icon');
+    }
+  });
+}
+
+async function getMDIMetadataAndUpdated(iconsBundle){
+  const mdiBundle = JSON.parse(await fs.promises.readFile(mdiMetadata));
+
+  iconsBundle
+    .filter(item => item.name.startsWith('mdi:'))
+    .forEach(item => {
+      const iconName = item.name.substring(item.name.indexOf(":") + 1);
+      const findItem = mdiBundle.find((el) => el.name === iconName);
+      if (!findItem) {
+        console.error('Delete icon:', item.name);
+      }
+    });
+
+
+  mdiBundle.forEach((item, index) => {
+    const iconName = `mdi:${item.name}`
+    let iconTags = item.tags;
+    const iconAliases = item.aliases.map(item => item.replaceAll('-', ' '));
+    if (!iconTags.length && item.aliases.length)  {
+      iconTags = iconAliases;
+    } else if (item.aliases.length) {
+      iconTags = iconTags.concat(iconAliases);
+    }
+    iconTags = iconTags.map(item => item.toLowerCase());
+
+    const findItem = iconsBundle.find((el) => el.name === iconName);
+    if (!findItem) {
+      let prevIndexIcon;
+      if (index === 0) {
+        prevIndexIcon = iconsBundle.findIndex(item => item.name.startsWith('mdi:'))
+      } else {
+        const prevIconName = `mdi:${mdiBundle[index - 1].name}`;
+        prevIndexIcon = findPreviousIcon(iconsBundle, prevIconName);
+      }
+      if (prevIndexIcon >= 0) {
+        iconsBundle.splice(prevIndexIcon + 1, 0, {name:iconName, tags:iconTags});
+      }
+      console.log('Not found icon:', iconName);
+      console.count('Not found mdi icon');
+      return;
+    }
+    if (JSON.stringify(iconTags) !== JSON.stringify(findItem.tags)) {
+      findItem.tags = iconTags;
+      console.log('Difference tags in', iconName);
+      console.count('Difference tags in mdi icon');
+    }
+  });
+}
+
+function findPreviousIcon(iconsBundle, findName) {
+  return iconsBundle.findIndex(item => item.name === findName);
+}
+
+init();

ui-ngx/package.json

@@ -7,6 +7,7 @@
     "build": "ng build",
     "build:prod": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --configuration production --vendor-chunk",
     "build:types": "node generate-types.js",
+    "build:icon-metadata": "node generate-icon-metadata.js",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",

ui-ngx/src/app/shared/models/icon.models.ts

@@ -53,7 +53,16 @@ export const svgIcons: {[key: string]: string} = {
     '<path fill="#fff" d="M9 4V2H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h5v-2H4V4h5z"/>' +
     '<path fill="#fff" d="M7 18V6h2v12H7zM11 6v12h2V6h-2zM15 20v2h5a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-5v2h5v16h-5z"/>' +
     '<path fill="#fff" d="M15 18V6h2v12h-2z"/>' +
-    '</svg>'
+    '</svg>',
+  trendz: '<svg viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="m 17.329936,0 1.999613,2.003952 -2.674056,' +
+    '2.679916 2.661746,2.6765649 2.678508,-2.684351 1.999613,2.0039449 -2.682055,2.6878227 2.661607,2.6763665 -2.641298,2.656033 ' +
+    '2.661746,2.66751 -1.999613,2.004017 -2.658338,-2.664181 -2.661607,2.676508 2.653887,2.659575 -1.999614,2.003804 L 14.679666,' +
+    '21.39152 11.997681,24.088432 9.3156944,21.39152 6.6653477,24.047482 4.6657413,22.043678 7.3194891,19.384103 4.6578333,16.707382 ' +
+    '1.9996133,19.371421 0,17.367405 2.6616488,14.700107 0.02053398,12.044216 2.6820275,9.3678495 1.4263538e-5,6.6800126 1.9996273,' +
+    '4.6760606 4.678212,7.3604329 7.3397982,4.6839955 4.6657413,2.0041717 6.6653477,2.2309572e-4 9.3360035,2.6766286 11.997681,' +
+    '0 14.659287,2.6765011 Z m -5.332255,4.0079963 1.999613,2.003945 -7.99844,8.0158157 -1.9996133,-2.004017 z m 1.676684,4.3522483 ' +
+    '1.999613,2.0039454 -6.6654242,6.679793 -1.9996133,-2.003874 z m 2.988987,7.0033574 -1.999544,-2.003945 -4.6658108,4.675848 ' +
+    '1.9996128,2.004015 z"/></svg>'
 };
 
 export const svgIconsUrl: { [key: string]: string } = {