fix: use tags icon for attr (#17841)

apps/web/playwright/icons.e2e.ts

@@ -2,9 +2,15 @@ import { expect } from "@playwright/test";
 
 import { test } from "./lib/fixtures";
 
-test("Icons render properly", async ({ page }, testInfo) => {
+// Set a consistent viewport size across all environments
+test.use({
+  viewport: { width: 1265, height: 1320 }, // Match the expected dimensions
+});
+
+test("Icons render properly", async ({ page }) => {
   await page.goto("/icons");
   await expect(page).toHaveScreenshot("icons.png", {
+    maxDiffPixelRatio: 0.05,
     fullPage: true,
   });
 });

apps/web/public/icons/sprite.svg

@@ -596,6 +596,11 @@
   <path d="m16 6-4 4-4-4" ></path>
   <path d="M16 18a4 4 0 0 0-8 0" ></path>
 </symbol>
+<symbol class="lucide lucide-tags" viewBox="0 0 24 24" fill="inherit" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="tags">
+  <path d="m15 5 6.3 6.3a2.4 2.4 0 0 1 0 3.4L17 19" ></path>
+  <path d="M9.586 5.586A2 2 0 0 0 8.172 5H3a1 1 0 0 0-1 1v5.172a2 2 0 0 0 .586 1.414L8.29 18.29a2.426 2.426 0 0 0 3.42 0l3.58-3.58a2.426 2.426 0 0 0 0-3.42z" ></path>
+  <circle cx="6.5" cy="9.5" r=".5" fill="currentColor" ></circle>
+</symbol>
 <symbol class="lucide lucide-terminal" viewBox="0 0 24 24" fill="inherit" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="terminal">
   <polyline points="4 17 10 11 4 5" ></polyline>
   <line x1="12" x2="20" y1="19" y2="19" ></line>

packages/features/ee/organizations/pages/settings/attributes/attributes-list-view.tsx

@@ -157,7 +157,7 @@ function OrganizationAttributesPage() {
           ) : (
             <div className="flex w-full flex-col items-center justify-center p-14">
               <div className="bg-emphasis text-emphasis flex h-16 w-16 items-center justify-center rounded-full p-2">
-                <Icon name="loader" />
+                <Icon name="tags" />
               </div>
               <h2 className="font-cal text-emphasis mt-6 text-xl font-semibold leading-none">
                 {t("add_attributes")}

packages/ui/components/icon/icon-list.mjs

@@ -119,6 +119,7 @@ export const lucideIconList = new Set([
   "sun",
   "sunrise",
   "sunset",
+  "tags",
   "terminal",
   "trash-2",
   "trash",

packages/ui/components/icon/icon-names.ts

@@ -120,6 +120,7 @@ export type IconName =
   | "sun"
   | "sunrise"
   | "sunset"
+  | "tags"
   | "terminal"
   | "trash-2"
   | "trash"