Remove icons from CSS output

assets/web/css/cpd-common.css

@@ -1,20 +1,4 @@
 :root, [class*="cpd-theme-"] {
-  --cpd-icon-web-browser: url(../icons/web-browser.svg);
-  --cpd-icon-visibility-visible: url(../icons/visibility-visible.svg);
-  --cpd-icon-visibility-invisible: url(../icons/visibility-invisible.svg);
-  --cpd-icon-user: url(../icons/user.svg);
-  --cpd-icon-thread: url(../icons/thread.svg);
-  --cpd-icon-mobile: url(../icons/mobile.svg);
-  --cpd-icon-lock: url(../icons/lock.svg);
-  --cpd-icon-info: url(../icons/info.svg);
-  --cpd-icon-error: url(../icons/error.svg);
-  --cpd-icon-delete: url(../icons/delete.svg);
-  --cpd-icon-computer: url(../icons/computer.svg);
-  --cpd-icon-close: url(../icons/close.svg);
-  --cpd-icon-chevron: url(../icons/chevron.svg);
-  --cpd-icon-check: url(../icons/check.svg);
-  --cpd-icon-check-circle: url(../icons/check-circle.svg);
-  --cpd-icon-chat: url(../icons/chat.svg);
   --cpd-font-letter-spacing-heading-xl: -0.0216em;
   --cpd-font-letter-spacing-heading-lg: -0.0209em;
   --cpd-font-letter-spacing-heading-md: -0.0195em;

src/configs/getWebConfig.ts

@@ -37,10 +37,6 @@ export default function (target: "js" | "css" | "ts", theme: Theme): Platform {
     target === "css" ? "name/cti/kebab" : "camelCaseDecimal",
   ];
 
-  if (target === "css") {
-    transforms.push("css/iconsImport");
-  }
-
   return {
     prefix: COMPOUND_TOKENS_NAMESPACE,
     transforms,
@@ -81,7 +77,7 @@ function getFilesFormat(theme: Theme, target: "css" | "js" | "ts"): File[] {
       {
         destination: `${COMPOUND_TOKENS_NAMESPACE}-common.css`,
         format: "css/variables",
-        filter: "isNotCoreColor",
+        filter: "isSharedAcrossTheme",
         options: {
           showFileHeader: false,
           outputReferences: true,

src/filters/isSharedAcrossTheme.ts

@@ -0,0 +1,27 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+import { TransformedToken } from "style-dictionary/types/TransformedToken";
+import { isNotCoreColor } from "./isCoreColor";
+
+const isSharedAcrossTheme = {
+  name: "isSharedAcrossTheme",
+  matcher: function (token: TransformedToken): boolean {
+    return isNotCoreColor.matcher(token) && token.type !== "icon";
+  },
+};
+
+export { isSharedAcrossTheme };

src/setupStyleDictionary.ts

@@ -19,13 +19,16 @@ import { Core } from "style-dictionary";
 import { Named } from "style-dictionary/types/_helpers";
 import { Transform } from "style-dictionary/types/Transform";
 import { registerTransforms } from "@tokens-studio/sd-transforms";
-import * as fs from 'fs';
-import * as path from 'path';
+import * as fs from "fs";
+import * as path from "path";
 
 import camelCaseDecimal from "./transforms/camelCaseDecimal";
 import pxToCGFloat from "./transforms/swift/pxToCGFloat";
 import toFontWeight from "./transforms/swift/toFontWeight";
-import { getStyleDictionaryConfig, getStyleDictionaryCommonConfig } from "./configs";
+import {
+  getStyleDictionaryConfig,
+  getStyleDictionaryCommonConfig,
+} from "./configs";
 import { Platform, Theme } from "./@types";
 import colorset from "./actions/swift/colorset";
 import { Action } from "style-dictionary/types/Action";
@@ -44,6 +47,7 @@ import svgToDrawable from "./transforms/kotlin/svgToDrawable";
 import iconsImport from "./transforms/css/iconsImport";
 import svgToImageView from "./transforms/swift/svgToImageView";
 import * as lodash from "lodash";
+import { isSharedAcrossTheme } from "./filters/isSharedAcrossTheme";
 
 async function setupDictionary(sb: Core) {
   await registerTransforms(sb);
@@ -117,13 +121,21 @@ async function setupDictionary(sb: Core) {
   sb.registerFilter(iosExclude);
   sb.registerFilter(isCoreColor);
   sb.registerFilter(isNotCoreColor);
+  sb.registerFilter(isSharedAcrossTheme);
 
   const extraColorsTemplate = lodash.template(
-    fs.readFileSync(path.join(__dirname, 'formats/templates/compose/extra-colors.kt.template')).toString()
+    fs
+      .readFileSync(
+        path.join(
+          __dirname,
+          "formats/templates/compose/extra-colors.kt.template"
+        )
+      )
+      .toString()
   );
   sb.registerFormat({
-    name: 'compose/extra-colors',
-    formatter: extraColorsTemplate
+    name: "compose/extra-colors",
+    formatter: extraColorsTemplate,
   });
 }