@purpurds/icon 3.0.0

package/src/icon-imports.ts

@@ -0,0 +1,339 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated do not edit it manually
+ */
+
+import * as icons from "./all-icons";
+
+export const iconList = {
+  "activity-level": icons.activityLevel,
+  add: icons.add,
+  "address-book": icons.addressBook,
+  "ai-robot": icons.aiRobot,
+  airplay: icons.airplay,
+  "alarm-off": icons.alarmOff,
+  "alarm-on": icons.alarmOn,
+  alert: icons.alert,
+  "alert-filled": icons.alertFilled,
+  android: icons.android,
+  apple: icons.apple,
+  "arrow-down": icons.arrowDown,
+  "arrow-left": icons.arrowLeft,
+  "arrow-right": icons.arrowRight,
+  "arrow-subdirectory": icons.arrowSubdirectory,
+  "arrow-up": icons.arrowUp,
+  attachment: icons.attachment,
+  "b2b-customer": icons.b2bCustomer,
+  bag: icons.bag,
+  bankid: icons.bankid,
+  "bar-chart": icons.barChart,
+  basketball: icons.basketball,
+  battery: icons.battery,
+  "blood-pressure": icons.bloodPressure,
+  bluetooth: icons.bluetooth,
+  bookmark: icons.bookmark,
+  "bookmark-filled": icons.bookmarkFilled,
+  broadband: icons.broadband,
+  "broken-phone": icons.brokenPhone,
+  bulb: icons.bulb,
+  "business-continuity": icons.businessContinuity,
+  "business-intelligence": icons.businessIntelligence,
+  calendar: icons.calendar,
+  camera: icons.camera,
+  "card-view": icons.cardView,
+  care: icons.care,
+  cart: icons.cart,
+  cast: icons.cast,
+  chat: icons.chat,
+  "chat-robot": icons.chatRobot,
+  "check-circle-filled": icons.checkCircleFilled,
+  "check-circle": icons.checkCircle,
+  checkmark: icons.checkmark,
+  "checkmark-bold": icons.checkmarkBold,
+  "chevron-down": icons.chevronDown,
+  "chevron-left": icons.chevronLeft,
+  "chevron-right": icons.chevronRight,
+  "chevron-up": icons.chevronUp,
+  "child-1": icons.child_1,
+  "child-2": icons.child_2,
+  close: icons.close,
+  "close-circle": icons.closeCircle,
+  cloud: icons.cloud,
+  "cloud-connect": icons.cloudConnect,
+  coffee: icons.coffee,
+  compass: icons.compass,
+  connected: icons.connected,
+  "connected-building": icons.connectedBuilding,
+  construction: icons.construction,
+  conversation: icons.conversation,
+  cookie: icons.cookie,
+  copy: icons.copy,
+  "copy-filled": icons.copyFilled,
+  "core-router": icons.coreRouter,
+  "credit-card": icons.creditCard,
+  "customer-dialogue": icons.customerDialogue,
+  "daas-device": icons.daasDevice,
+  "data-transfer": icons.dataTransfer,
+  delivery: icons.delivery,
+  desktop: icons.desktop,
+  devices: icons.devices,
+  dislike: icons.dislike,
+  doc: icons.doc,
+  "document-doc": icons.documentDoc,
+  "document-edit": icons.documentEdit,
+  "document-pdf": icons.documentPdf,
+  "document-ppt": icons.documentPpt,
+  download: icons.download,
+  drone: icons.drone,
+  "dsl-hub": icons.dslHub,
+  edit: icons.edit,
+  education: icons.education,
+  efficiency: icons.efficiency,
+  email: icons.email,
+  "end-user": icons.endUser,
+  entertainment: icons.entertainment,
+  environment: icons.environment,
+  error: icons.error,
+  "error-filled": icons.errorFilled,
+  esim: icons.esim,
+  "esim-simcard": icons.esimSimcard,
+  euro: icons.euro,
+  excel: icons.excel,
+  external: icons.external,
+  facebook: icons.facebook,
+  "face-id": icons.faceId,
+  facemask: icons.facemask,
+  fiber: icons.fiber,
+  film: icons.film,
+  filter: icons.filter,
+  fingerprint: icons.fingerprint,
+  fiveg: icons.fiveg,
+  flag: icons.flag,
+  focus: icons.focus,
+  folder: icons.folder,
+  "folder-copy": icons.folderCopy,
+  "folder-new": icons.folderNew,
+  food: icons.food,
+  fourg: icons.fourg,
+  fraud: icons.fraud,
+  games: icons.games,
+  "getting-started": icons.gettingStarted,
+  gif: icons.gif,
+  graph: icons.graph,
+  "grid-view": icons.gridView,
+  handshake: icons.handshake,
+  headphones: icons.headphones,
+  heart: icons.heart,
+  "heart-filled": icons.heartFilled,
+  help: icons.help,
+  home: icons.home,
+  "home-care": icons.homeCare,
+  "home-installation": icons.homeInstallation,
+  hospital: icons.hospital,
+  image: icons.image,
+  "industrial-iot": icons.industrialIot,
+  industry: icons.industry,
+  infinite: icons.infinite,
+  info: icons.info,
+  "info-filled": icons.infoFilled,
+  instagram: icons.instagram,
+  internet: icons.internet,
+  invisible: icons.invisible,
+  invoice: icons.invoice,
+  "it-service": icons.itService,
+  "job-search": icons.jobSearch,
+  key: icons.key,
+  kontantkort: icons.kontantkort,
+  kr: icons.kr,
+  laptop: icons.laptop,
+  "late-payment": icons.latePayment,
+  layers: icons.layers,
+  letter: icons.letter,
+  like: icons.like,
+  link: icons.link,
+  linkedin: icons.linkedin,
+  "list-view": icons.listView,
+  lock: icons.lock,
+  "lock-open": icons.lockOpen,
+  login: icons.login,
+  logout: icons.logout,
+  map: icons.map,
+  maximize: icons.maximize,
+  "measuring-health": icons.measuringHealth,
+  "media-content": icons.mediaContent,
+  megaphone: icons.megaphone,
+  menu: icons.menu,
+  microphone: icons.microphone,
+  minimize: icons.minimize,
+  minus: icons.minus,
+  "minus-bold": icons.minusBold,
+  mms: icons.mms,
+  "mobile-broadband": icons.mobileBroadband,
+  moisture: icons.moisture,
+  "money-back-euro": icons.moneyBackEuro,
+  "money-back-kr": icons.moneyBackKr,
+  "money-euro": icons.moneyEuro,
+  "money-kr": icons.moneyKr,
+  "more-horizontal": icons.moreHorizontal,
+  "more-vertical": icons.moreVertical,
+  music: icons.music,
+  mute: icons.mute,
+  network: icons.network,
+  "new-contact": icons.newContact,
+  "new-group": icons.newGroup,
+  news: icons.news,
+  offering: icons.offering,
+  offshore: icons.offshore,
+  optimization: icons.optimization,
+  "org-chart": icons.orgChart,
+  "parental-guide": icons.parentalGuide,
+  "password-invisible": icons.passwordInvisible,
+  "password-visible": icons.passwordVisible,
+  "payment-success": icons.paymentSuccess,
+  "pay-monthly-euro": icons.payMonthlyEuro,
+  "pay-monthly-kr": icons.payMonthlyKr,
+  "pay-once-euro": icons.payOnceEuro,
+  "pay-once-kr": icons.payOnceKr,
+  pebble: icons.pebble,
+  people: icons.people,
+  "people-hub": icons.peopleHub,
+  "pet-dog": icons.petDog,
+  phone: icons.phone,
+  "phone-recycling": icons.phoneRecycling,
+  "phone-ringing": icons.phoneRinging,
+  "pie-chart": icons.pieChart,
+  pin: icons.pin,
+  plane: icons.plane,
+  play: icons.play,
+  "player-settings": icons.playerSettings,
+  "play-filled": icons.playFilled,
+  plus: icons.plus,
+  "plus-minus": icons.plusMinus,
+  police: icons.police,
+  portal: icons.portal,
+  "power-grid": icons.powerGrid,
+  premises: icons.premises,
+  "premises-datacenter": icons.premisesDatacenter,
+  "premises-large": icons.premisesLarge,
+  "premises-medium": icons.premisesMedium,
+  "premises-small": icons.premisesSmall,
+  present: icons.present,
+  "press-button": icons.pressButton,
+  price: icons.price,
+  print: icons.print,
+  pulse: icons.pulse,
+  question: icons.question,
+  "question-filled": icons.questionFilled,
+  rack: icons.rack,
+  radio: icons.radio,
+  record: icons.record,
+  recycle: icons.recycle,
+  "refill-card": icons.refillCard,
+  register: icons.register,
+  "remote-control": icons.remoteControl,
+  remove: icons.remove,
+  "remove-filled": icons.removeFilled,
+  repair: icons.repair,
+  report: icons.report,
+  reservation: icons.reservation,
+  reverse: icons.reverse,
+  roaming: icons.roaming,
+  route: icons.route,
+  router: icons.router,
+  ruler: icons.ruler,
+  satellite: icons.satellite,
+  save: icons.save,
+  savings: icons.savings,
+  search: icons.search,
+  "secured-1": icons.secured_1,
+  "secured-2": icons.secured_2,
+  "secure-device": icons.secureDevice,
+  "security-camera": icons.securityCamera,
+  send: icons.send,
+  "sense-car": icons.senseCar,
+  server: icons.server,
+  "service-device": icons.serviceDevice,
+  services: icons.services,
+  "service-supervision": icons.serviceSupervision,
+  settings: icons.settings,
+  share: icons.share,
+  shopping: icons.shopping,
+  shuffle: icons.shuffle,
+  signature: icons.signature,
+  simcard: icons.simcard,
+  "skip-back-10sec": icons.skipBack_10sec,
+  "skip-back-30sec": icons.skipBack_30sec,
+  "skip-forward-10sec": icons.skipForward_10sec,
+  "skip-forward-30sec": icons.skipForward_30sec,
+  "slow-wifi": icons.slowWifi,
+  smartphone: icons.smartphone,
+  smartwatch: icons.smartwatch,
+  "smart-wifi": icons.smartWifi,
+  "smiley-happy": icons.smileyHappy,
+  "smiley-sad": icons.smileySad,
+  sms: icons.sms,
+  snapchat: icons.snapchat,
+  snowflake: icons.snowflake,
+  sorter: icons.sorter,
+  speedometer: icons.speedometer,
+  "spell-check": icons.spellCheck,
+  split: icons.split,
+  spyware: icons.spyware,
+  star: icons.star,
+  "star-filled": icons.starFilled,
+  stop: icons.stop,
+  store: icons.store,
+  stream: icons.stream,
+  suitcase: icons.suitcase,
+  summary: icons.summary,
+  support: icons.support,
+  sustainability: icons.sustainability,
+  "switch-arrows": icons.switchArrows,
+  sync: icons.sync,
+  tablet: icons.tablet,
+  "table-view": icons.tableView,
+  tag: icons.tag,
+  temperature: icons.temperature,
+  thinking: icons.thinking,
+  time: icons.time,
+  "trade-phone": icons.tradePhone,
+  trailer: icons.trailer,
+  train: icons.train,
+  transfer: icons.transfer,
+  tv: icons.tv,
+  "tv-next": icons.tvNext,
+  "tv-pause": icons.tvPause,
+  "tv-previous": icons.tvPrevious,
+  "tv-stop": icons.tvStop,
+  undo: icons.undo,
+  upload: icons.upload,
+  usb: icons.usb,
+  "user-admin": icons.userAdmin,
+  vcard: icons.vcard,
+  video: icons.video,
+  "video-conference": icons.videoConference,
+  visible: icons.visible,
+  voicemail: icons.voicemail,
+  "voice-switch": icons.voiceSwitch,
+  volume: icons.volume,
+  wallet: icons.wallet,
+  wallplug: icons.wallplug,
+  warning: icons.warning,
+  wavelength: icons.wavelength,
+  weather: icons.weather,
+  whatsapp: icons.whatsapp,
+  windows: icons.windows,
+  wireless: icons.wireless,
+  "wireless-off": icons.wirelessOff,
+  "wireless-weak": icons.wirelessWeak,
+  world: icons.world,
+  "world-alert": icons.worldAlert,
+  "world-off": icons.worldOff,
+  "world-question": icons.worldQuestion,
+  x: icons.x,
+  youtube: icons.youtube,
+  zoom: icons.zoom,
+  "zoom-out": icons.zoomOut,
+};
+
+export default iconList;

package/src/icon.module.scss

@@ -0,0 +1,28 @@
+.purpur-icon {
+  display: inline-block;
+
+  &--xxs {
+    width: var(--purpur-spacing-150);
+    height: var(--purpur-spacing-150);
+  }
+  &--xs {
+    width: var(--purpur-spacing-200);
+    height: var(--purpur-spacing-200);
+  }
+  &--sm {
+    width: var(--purpur-spacing-250);
+    height: var(--purpur-spacing-250);
+  }
+  &--md {
+    width: var(--purpur-spacing-300);
+    height: var(--purpur-spacing-300);
+  }
+  &--lg {
+    width: var(--purpur-spacing-400);
+    height: var(--purpur-spacing-400);
+  }
+  &--xl {
+    width: var(--purpur-spacing-600);
+    height: var(--purpur-spacing-600);
+  }
+}

package/src/icon.stories.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { IconGallery, IconItem } from "@storybook/blocks";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Icon, sizes } from "./icon";
+import { iconList } from "./icon-imports";
+import { Heading } from "../../heading";
+
+const meta: Meta<typeof Icon> = {
+  title: "Components/Icon",
+  component: Icon,
+  parameters: {
+    backgrounds: {
+      default: "Secondary",
+      grid: { disable: true },
+    },
+    design: [
+      {
+        name: "Icon",
+        type: "figma",
+        url: "https://www.figma.com/file/2QIcZVqP99ZKY4rNW7VuSx/Purpur-DS---Foundations-Library?type=design&node-id=5704%3A7889&mode=design&t=g9v2iSuQyxQsQE2P-1",
+      },
+    ],
+  },
+  argTypes: {
+    allyTitle: { control: { type: "text" } },
+    ["data-testid"]: { control: { type: "text" } },
+    className: { control: { type: "text" } },
+    size: {
+      options: sizes,
+      control: { type: "select" },
+    },
+    svg: {
+      options: Object.keys(iconList),
+      mapping: iconList,
+      control: {
+        type: "select",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Icon>;
+
+export const Showcase: Story = {
+  args: {
+    size: sizes[sizes.length - 1],
+    svg: Object.values(iconList)[3],
+  },
+};
+
+type Acc = [
+  { name: string; entries: [{ name: string; svg: string; keywords: string[]; category: string }] },
+];
+
+const result = Object.entries(iconList).reduce(
+  (acc, cur) => {
+    const category = cur[1].category;
+    if (acc.some((x) => x.name === category)) {
+      acc.find((y) => y.name === category)?.entries.push(cur[1]);
+    } else {
+      acc.push({ name: category, entries: [cur[1]] });
+    }
+    return acc;
+  },
+  [] as unknown as Acc
+);
+const sortedResult = result.sort((a, b) => a.name.localeCompare(b.name));
+
+const Categories = () => (
+  <>
+    {sortedResult.map((z) => (
+      <span key={z.name}>
+        <Heading variant="title-100" tag="h2" style={{ margin: "24px 0" }}>
+          {z.name.charAt(0).toUpperCase() + z.name.slice(1)}
+        </Heading>
+        <IconGallery>
+          {z.entries.map((icon) => (
+            <IconItem name={icon.name} key={icon.name}>
+              <Icon svg={icon} size="lg" />
+            </IconItem>
+          ))}
+        </IconGallery>
+      </span>
+    ))}
+  </>
+);
+
+export const AllIcons: Story = {
+  parameters: {
+    controls: { exclude: /.*/g },
+    options: {
+      showPanel: false,
+    },
+  },
+  render: () => <Categories />,
+};

package/src/icon.test.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import * as axeMatchers from "vitest-axe/matchers";
+
+import { Icon, IconProps, sizes } from "./icon";
+
+expect.extend(matchers);
+expect.extend(axeMatchers);
+
+describe("Icon", () => {
+  const svg = { svg: '<path d="M10 10 H 90 V 90 H 10 L 10 10" />', name: "test" };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders without crashing", () => {
+    render(<Icon data-testid="icon" svg={svg} />);
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+  });
+
+  it("renders with correct svg content", () => {
+    render(<Icon data-testid="icon" svg={svg} />);
+    const icon = screen.getByTestId("icon");
+    expect(icon).toContainHTML('<path d="M10 10 H 90 V 90 H 10 L 10 10" />');
+  });
+
+  it("renders with correct allyTitle", () => {
+    render(<Icon data-testid="icon" svg={svg} allyTitle="test title" />);
+    const icon = screen.getByTestId("icon");
+    expect(icon).toHaveAttribute("aria-label", "test title");
+  });
+
+  it.each(sizes)("renders with %s size", (size) => {
+    render(<Icon data-testid="icon" svg={svg} size={size} />);
+    const icon = screen.getByTestId("icon");
+    expect(icon).toHaveClass(`purpur-icon--${size}`);
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(<Icon svg={svg} />);
+    const results = await axe(container);
+    // @ts-ignore
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/icon.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import c from "classnames/bind";
+
+import styles from "./icon.module.scss";
+import { iconList } from "./icon-imports";
+
+export * from "./all-icon-components";
+export * from "./all-icons";
+export { iconList };
+export declare type IconName = keyof typeof iconList;
+
+const cx = c.bind(styles);
+const rootClassName = "purpur-icon";
+
+export const sizes = ["xxs", "xs", "sm", "md", "lg", "xl"] as const;
+export const DEFAULT_SIZE = "md" as const;
+
+export type Size = (typeof sizes)[number];
+
+type CreateSvg = {
+  content?: string;
+  title?: string;
+  ariaHidden?: boolean;
+};
+
+export type IconBaseProps = {
+  size?: Size;
+  allyTitle?: string;
+  ["data-testid"]?: string;
+  className?: string;
+};
+
+export type IconProps = {
+  svg: { svg: string; name: string };
+} & IconBaseProps;
+
+// Create string from array of attributes
+const getAttributesString = (attributeCollection: Record<string, unknown>[]) =>
+  attributeCollection
+    .filter((attr) => Object.keys(attr).length >= 1) // remove empty object
+    .map((item) => `${item.name}="${item.value}"`)
+    .join(" ");
+
+const createSvg = ({ content = "", title }: CreateSvg = {}) => {
+  const attributeCollection = [
+    { name: "xmlns", value: "http://www.w3.org/2000/svg" },
+    { name: "fill", value: "currentColor" },
+    { name: "viewBox", value: "0 0 24 24" },
+    title ? { name: "role", value: "img" } : { name: "aria-hidden", value: "true" },
+  ];
+
+  const titleElement = title ? `<title>${title}</title>` : "";
+  return `<svg ${getAttributesString(attributeCollection)}>${titleElement}${content}</svg>`;
+};
+
+// Remove svg tags
+const getSvgContent = (svg: string): string => svg.replace(/<(\/?)svg([^>]*)>/g, "").trim();
+
+export const Icon = ({
+  ["data-testid"]: dataTestid,
+  svg,
+  allyTitle,
+  className = "",
+  size = DEFAULT_SIZE,
+  ...props
+}: IconProps) => {
+  const svgString = createSvg({
+    content: getSvgContent(svg.svg),
+    title: allyTitle,
+  });
+
+  const classes = cx(className, rootClassName, `${rootClassName}--${size}`);
+
+  return (
+    <span
+      aria-label={allyTitle}
+      className={classes}
+      data-testid={dataTestid}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: svgString }}
+      {...props}
+    />
+  );
+};

package/src/svgs/action/alarm-off.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#1E1E20" fill-rule="evenodd" d="M11.38 3.768s0 .018.004.062l.013.154a20.12 20.12 0 0 0 .088.768l.014.116.006.041.098.758-.73.22a6.972 6.972 0 0 0-1.175.467 5.498 5.498 0 0 0-.462.267 4.71 4.71 0 0 0-.75.593l13.15 13.15a.9.9 0 0 1-1.272 1.272l-2.2-2.2H4a.9.9 0 0 1-.772-1.363c.091-.151.189-.298.292-.452.258-.387.55-.823.84-1.502.389-.906.74-2.202.74-4.083 0-.768.056-1.502.18-2.194a.9.9 0 1 1 1.771.316c-.101.57-.151 1.195-.151 1.878 0 2.12-.399 3.657-.885 4.792-.126.293-.26.564-.394.808h10.742l-14-14a.9.9 0 0 1 1.273-1.272L7.214 5.94a6.519 6.519 0 0 1 1.048-.834c.196-.126.4-.244.614-.354.24-.124.493-.237.756-.34a7.39 7.39 0 0 1-.052-.643A2.427 2.427 0 0 1 12 1.333c1.274 0 2.533 1.053 2.416 2.508a31.8 31.8 0 0 1-.056.562c1.52.581 2.64 1.483 3.387 2.702.845 1.378 1.153 3.065 1.153 4.93 0 .536.025 1.02.07 1.458.03.304.07.586.117.848a.9.9 0 1 1-1.772.316 12.999 12.999 0 0 1-.137-.983 16.341 16.341 0 0 1-.078-1.639c0-1.691-.284-3.004-.888-3.99-.588-.96-1.54-1.703-3.079-2.157l-.722-.212.082-.749.018-.163a172.479 172.479 0 0 0 .11-1.068.46.46 0 0 0-.152-.37.682.682 0 0 0-.47-.193.627.627 0 0 0-.619.634ZM7.72 21.086a.9.9 0 0 1 1.154-.537c.974.356 2.026.55 3.126.55s2.152-.194 3.125-.55a.9.9 0 1 1 .618 1.69A10.88 10.88 0 0 1 12 22.9a10.88 10.88 0 0 1-3.744-.66.9.9 0 0 1-.536-1.153Z" clip-rule="evenodd"/>
+</svg>

package/src/svgs/action/alarm-on.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#1E1E20" fill-rule="evenodd" d="M11.38 3.768s0 .019.004.062l.013.154a20.12 20.12 0 0 0 .088.768l.014.116.006.041.098.758-.73.22c-1.5.453-2.456 1.197-3.058 2.164-.614.989-.915 2.303-.915 3.985 0 2.12-.399 3.657-.885 4.792-.126.293-.26.564-.394.808h12.724a8.794 8.794 0 0 1-.426-.879c-.467-1.122-.819-2.616-.819-4.72 0-1.692-.284-3.005-.888-3.99-.588-.96-1.54-1.704-3.079-2.158l-.74-.218.103-.765.001-.01.004-.03.014-.111.044-.357c.035-.298.06-.553.06-.629a.628.628 0 0 0-.62-.635.627.627 0 0 0-.619.634Zm2.99.64c.025-.227.049-.482.049-.639a2.427 2.427 0 0 0-2.42-2.435A2.428 2.428 0 0 0 9.58 3.769v.001c0 .147.026.411.052.643-1.483.582-2.594 1.48-3.345 2.688C5.432 8.476 5.1 10.16 5.1 12.036c0 1.881-.351 3.177-.74 4.083-.29.68-.582 1.115-.84 1.502-.103.154-.201.3-.292.452A.9.9 0 0 0 4 19.436h16a.9.9 0 0 0 .749-1.399 16.64 16.64 0 0 0-.23-.334c-.31-.447-.64-.922-.938-1.638-.366-.878-.681-2.134-.681-4.029 0-1.865-.308-3.552-1.153-4.93-.745-1.216-1.862-2.117-3.377-2.698ZM7.72 21.086a.9.9 0 0 1 1.154-.537c.974.356 2.026.55 3.126.55s2.152-.194 3.125-.55a.9.9 0 1 1 .618 1.69A10.88 10.88 0 0 1 12 22.9a10.88 10.88 0 0 1-3.744-.66.9.9 0 0 1-.536-1.153Z" clip-rule="evenodd"/>
+</svg>

package/src/svgs/action/attachment.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#1E1E20" fill-rule="evenodd" d="M15.654 3.87a3.872 3.872 0 0 1 5.484 0 3.913 3.913 0 0 1 0 5.5L10.934 19.636a5.34 5.34 0 0 1-7.588 0l-.002-.002a5.42 5.42 0 0 1 0-7.613l.004-.004 8.016-8.015a.9.9 0 0 1 1.272 1.273l-8.013 8.013a3.62 3.62 0 0 0 0 5.08 3.54 3.54 0 0 0 5.035-.002L19.862 8.102a2.113 2.113 0 0 0 0-2.962 2.072 2.072 0 0 0-2.931 0l-9.396 9.456a.607.607 0 0 0 0 .847c.226.228.6.228.827 0l.002-.002 3-3a.9.9 0 0 1 1.272 1.273L9.638 16.71a2.386 2.386 0 0 1-3.38 0 2.406 2.406 0 0 1 0-3.385l9.396-9.456Z" clip-rule="evenodd"/>
+</svg>

package/src/svgs/action/bookmark-filled.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#1E1E20" fill-rule="evenodd" d="M3.6 2.5a.9.9 0 0 1 .9-.9h15a.9.9 0 0 1 .9.9v19a.9.9 0 0 1-1.432.726L12 17.116l-6.968 5.11A.9.9 0 0 1 3.6 21.5v-19Z" clip-rule="evenodd"/>
+</svg>

package/src/svgs/action/bookmark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#1E1E20" fill-rule="evenodd" d="M3.6 2.5a.9.9 0 0 1 .9-.9h15a.9.9 0 0 1 .9.9v19a.9.9 0 0 1-1.432.726L12 17.116l-6.968 5.11A.9.9 0 0 1 3.6 21.5v-19Zm1.8.9v16.324l6.068-4.45a.9.9 0 0 1 1.064 0l6.068 4.45V3.4H5.4Z" clip-rule="evenodd"/>
+</svg>

package/src/svgs/action/copy-filled.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#000" fill-opacity=".84" d="M10 21h11V8H10v13Z"/>
+  <path fill="#1E1E20" fill-rule="evenodd" d="M2.1 3a.9.9 0 0 1 .9-.9h11.5a.9.9 0 0 1 .9.9v1.5a.9.9 0 0 1-1.8 0v-.6H3.9v12.7h2.6a.9.9 0 1 1 0 1.8H3a.9.9 0 0 1-.9-.9V3Zm7 5a.9.9 0 0 1 .9-.9h11a.9.9 0 0 1 .9.9v13a.9.9 0 0 1-.9.9H10a.9.9 0 0 1-.9-.9V8Zm1.8.9v11.2h9.2V8.9h-9.2Z" clip-rule="evenodd"/>
+</svg>

package/src/svgs/action/copy.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#1E1E20" fill-rule="evenodd" d="M2.1 3a.9.9 0 0 1 .9-.9h11.5a.9.9 0 0 1 .9.9v1.5a.9.9 0 0 1-1.8 0v-.6H3.9v12.7h2.6a.9.9 0 1 1 0 1.8H3a.9.9 0 0 1-.9-.9V3Zm7 5a.9.9 0 0 1 .9-.9h11a.9.9 0 0 1 .9.9v13a.9.9 0 0 1-.9.9H10a.9.9 0 0 1-.9-.9V8Zm1.8.9v11.2h9.2V8.9h-9.2Z" clip-rule="evenodd"/>
+</svg>

package/src/svgs/action/dislike.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#1E1E20" fill-rule="evenodd" d="M10.514 21.323c.676.552 1.57.663 2.565.52a.9.9 0 0 0 .69-.515l3.337-7.273h3.346a.9.9 0 0 0 .9-.9V2.452a.9.9 0 0 0-.9-.9H7.06a2.9 2.9 0 0 0-2.832 2.28l-1.575 7.191a2.9 2.9 0 0 0 2.833 3.522h4.042c-.013.483-.035.955-.056 1.415l-.03.673c-.038.92-.057 1.822.05 2.59.108.759.361 1.56 1.022 2.1Zm5.115-8.364L12.353 20.1c-.416.003-.608-.096-.7-.172-.139-.112-.294-.362-.378-.956-.082-.585-.073-1.334-.034-2.265l.028-.638c.034-.749.072-1.575.072-2.424a.9.9 0 0 0-.9-.9H5.486a1.1 1.1 0 0 1-1.075-1.336l1.575-7.192a1.1 1.1 0 0 1 1.074-.865h12.492v8.903h-2.123V5.371a.9.9 0 1 0-1.8 0v7.588Z" clip-rule="evenodd"/>
+</svg>

package/src/svgs/action/download.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#1E1E20" fill-rule="evenodd" d="M22.4 21.5a.9.9 0 0 1-.9.9h-19a.9.9 0 0 1-.9-.9V11a.9.9 0 0 1 1.8 0v9.6h17.2V11a.9.9 0 0 1 1.8 0v10.5Zm-9.764-4.864a.9.9 0 0 1-1.272 0l-5-5a.9.9 0 0 1 1.272-1.272l3.464 3.463V2.5a.9.9 0 0 1 1.8 0v11.327l3.464-3.463a.9.9 0 0 1 1.272 1.272l-5 5Z" clip-rule="evenodd"/>
+</svg>

package/src/svgs/action/edit.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#1E1E20" fill-rule="evenodd" d="M15.942 2.506a1.9 1.9 0 0 1 2.687 0l2.865 2.865a1.9 1.9 0 0 1 0 2.687l-11.37 11.37a.899.899 0 0 1-.335.212l-6.644 2.365a.9.9 0 0 1-1.15-1.15l2.365-6.644a.9.9 0 0 1 .212-.335l11.37-11.37Zm1.414 1.273a.1.1 0 0 0-.141 0L15.913 5.08l1.504 1.503a.9.9 0 0 1-1.273 1.273L14.64 6.353l-8.16 8.16 3.007 3.006L20.22 6.785a.1.1 0 0 0 0-.141l-2.865-2.865ZM7.844 18.42 5.58 16.156l-1.253 3.518 3.518-1.253Z" clip-rule="evenodd"/>
+</svg>

package/src/svgs/action/filter.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#1E1E20" fill-rule="evenodd" d="M6.165 7.458H2.5a.9.9 0 1 0 0 1.8h3.626a3.33 3.33 0 0 0 6.447 0H21.5a.9.9 0 1 0 0-1.8h-8.966a3.33 3.33 0 0 0-6.369 0Zm1.66.858a.922.922 0 0 1-.003.136 1.528 1.528 0 1 0 .004-.136Zm3.602 7.281H2.5a.9.9 0 0 0 0 1.8h8.966a3.329 3.329 0 0 0 6.369 0H21.5a.9.9 0 1 0 0-1.8h-3.626a3.329 3.329 0 0 0-6.447 0Zm1.696.826a.926.926 0 0 1 .002.098 1.528 1.528 0 0 0 3.05.019.986.986 0 0 1 .003-.136 1.528 1.528 0 0 0-3.055.019Z" clip-rule="evenodd"/>
+</svg>

package/src/svgs/action/heart-filled.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#1E1E20" d="M12 6.576s-.588-.649-1.015-1.067c-2.056-2.012-5.388-2.012-7.443 0a5.075 5.075 0 0 0 0 7.285C11.291 20.381 12 21 12 21s.707-.619 8.459-8.206a5.075 5.075 0 0 0 0-7.285c-2.056-2.012-5.388-2.012-7.444 0A30.892 30.892 0 0 0 12 6.576Z"/>
+  <path fill="#1E1E20" fill-rule="evenodd" d="M10.355 6.152c-1.705-1.67-4.478-1.67-6.184 0a4.175 4.175 0 0 0 0 5.999c3.875 3.793 5.988 5.842 7.13 6.943.293.28.52.5.699.67l.698-.67c1.143-1.1 3.256-3.15 7.13-6.943a4.175 4.175 0 0 0 0-5.999c-1.705-1.67-4.478-1.67-6.183 0a22.54 22.54 0 0 0-.883.924l-.07.077-.02.02-.005.007a.9.9 0 0 1-1.334 0l-.006-.006-.018-.02-.07-.078-.244-.262a22.414 22.414 0 0 0-.64-.662ZM12 5.257c-.129-.134-.263-.27-.386-.391-2.405-2.355-6.297-2.355-8.702 0a5.975 5.975 0 0 0 0 8.571c3.876 3.795 5.993 5.848 7.141 6.954a147.482 147.482 0 0 0 1.334 1.268l.012.011.005.004.002.002s.001.001.594-.676l-.593.677a.9.9 0 0 0 1.186 0L12 21l.593.677.001-.001.002-.002.005-.004.012-.01.042-.04.194-.18c.19-.18.524-.497 1.098-1.05 1.148-1.105 3.265-3.158 7.141-6.953a5.975 5.975 0 0 0 0-8.571c-2.405-2.355-6.297-2.355-8.702 0-.123.12-.257.257-.386.391Z" clip-rule="evenodd"/>
+</svg>

package/src/svgs/action/heart.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#1E1E20" fill-rule="evenodd" d="M10.355 6.152c-1.705-1.67-4.478-1.67-6.184 0a4.175 4.175 0 0 0 0 5.999c3.875 3.793 5.988 5.842 7.13 6.943.293.28.52.5.699.67l.698-.67c1.143-1.1 3.256-3.15 7.13-6.943a4.175 4.175 0 0 0 0-5.999c-1.705-1.67-4.478-1.67-6.183 0a22.54 22.54 0 0 0-.883.924l-.07.077-.02.02-.005.007a.9.9 0 0 1-1.334 0l-.006-.006-.018-.02-.07-.078-.244-.262a22.414 22.414 0 0 0-.64-.662ZM12 5.257c-.129-.134-.263-.27-.386-.391-2.405-2.355-6.297-2.355-8.702 0a5.975 5.975 0 0 0 0 8.571c3.876 3.795 5.993 5.848 7.141 6.954a147.482 147.482 0 0 0 1.334 1.268l.012.011.005.004.002.002s.001.001.594-.676l-.593.677a.9.9 0 0 0 1.186 0L12 21l.593.677.001-.001.002-.002.005-.004.012-.01.042-.04.194-.18c.19-.18.524-.497 1.098-1.05 1.148-1.105 3.265-3.158 7.141-6.953a5.975 5.975 0 0 0 0-8.571c-2.405-2.355-6.297-2.355-8.702 0-.123.12-.257.257-.386.391Z" clip-rule="evenodd"/>
+</svg>