@elmethis/qwik 0.0.2 → 0.0.4

package/src/components/fallback/elm-rectangle-wave.tsx

@@ -0,0 +1,11 @@
+import { component$ } from "@builder.io/qwik";
+
+import styles from "./elm-rectangle-wave.module.scss";
+
+export interface ElmRectangleWaveProps {
+  placeholder?: string;
+}
+
+export const ElmRectangleWave = component$<ElmRectangleWaveProps>(() => {
+  return <div aria-hidden="true" class={styles["rectangle-wave"]}></div>;
+});

package/src/components/icon/elm-dot-loading-icon.module.scss

@@ -0,0 +1,53 @@
+@keyframes bounce {
+  0% {
+    transform: translateY(0%) scaleY(0.3) scaleX(1.5);
+  }
+
+  10% {
+    transform: scaleY(0.8) scaleX(1.2);
+  }
+
+  100% {
+    transform: translateY(-400%) scaleY(1.1);
+  }
+}
+
+.wrapper {
+  width: var(--size);
+  height: var(--size);
+  user-select: none;
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+}
+
+.dot {
+  width: 20%;
+  height: 20%;
+  border-radius: 50%;
+  animation-name: bounce;
+  animation-duration: 0.4s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-timing-function: ease-out;
+
+  transition: background-color 400ms;
+  background-color: var(--color, #606875);
+
+  [data-theme="dark"] & {
+    background-color: #b0b5be;
+  }
+
+  &:nth-last-of-type(1) {
+    animation-delay: -100ms;
+  }
+
+  &:nth-last-of-type(2) {
+    animation-delay: 0ms;
+  }
+
+  &:nth-last-of-type(3) {
+    animation-delay: 100ms;
+  }
+}

package/src/components/icon/elm-dot-loading-icon.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmDotLoadingIcon } from "./elm-dot-loading-icon";
+
+const meta: Meta<typeof ElmDotLoadingIcon> = {
+  title: "Components/Icon/elm-dot-loading-icon",
+  component: ElmDotLoadingIcon,
+  tags: ["autodocs"],
+  argTypes: { color: { control: "color" } },
+  args: { size: "4em" },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

package/src/components/icon/elm-dot-loading-icon.tsx

@@ -0,0 +1,35 @@
+import { component$, type CSSProperties } from "@builder.io/qwik";
+
+import styles from "./elm-dot-loading-icon.module.scss";
+
+export interface ElmDotLoadingIconProps {
+  /**
+   * Specifies the color of the dot.
+   *
+   * e.g.) `'red'`, `'#ff0000'`, `'rgba(255, 0, 0, 0.5)'`
+   */
+  color?: CSSProperties["backgroundColor"];
+
+  /**
+   * Specifies the size of the dot.
+   */
+  size?: CSSProperties["width"];
+}
+
+export const ElmDotLoadingIcon = component$<ElmDotLoadingIconProps>(
+  ({ size = "4em", color = "#606875" }) => {
+    return (
+      <div
+        class={styles.wrapper}
+        style={{
+          "--size": size,
+          "--color": color,
+        }}
+      >
+        <div class={styles.dot} aria-hidden="true"></div>
+        <div class={styles.dot} aria-hidden="true"></div>
+        <div class={styles.dot} aria-hidden="true"></div>
+      </div>
+    );
+  },
+);

package/src/components/icon/elm-inline-icon.module.scss

@@ -0,0 +1,21 @@
+.icon {
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+  vertical-align: middle;
+  height: 1em;
+
+  &::selection {
+    filter: brightness(1000%);
+    background-color: var(--color, rgba(black, 0.25));
+  }
+
+  [data-theme="dark"] & {
+    color: var(--color, rgba(white, 0.7));
+
+    &::selection {
+      color: rgba(black, 0.7);
+      background-color: var(--color, rgba(white, 0.25));
+    }
+  }
+}

package/src/components/icon/elm-inline-icon.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmInlineIcon } from "./elm-inline-icon";
+
+const meta: Meta<typeof ElmInlineIcon> = {
+  title: "Components/Icon/elm-inline-icon",
+  component: ElmInlineIcon,
+  tags: ["autodocs"],
+  args: {
+    src: "https://rust-lang.org/logos/rust-logo-512x512.png",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

package/src/components/icon/elm-inline-icon.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable qwik/jsx-img */
+
+import { component$ } from "@builder.io/qwik";
+
+import styles from "./elm-inline-icon.module.scss";
+
+export interface ElmInlineIconProps {
+  /**
+   * The source URL of the icon.
+   */
+  src: string;
+
+  /**
+   * The alt text for the icon.
+   */
+  alt?: string;
+}
+
+export const ElmInlineIcon = component$<ElmInlineIconProps>(({ src, alt }) => {
+  return (
+    <div class={styles.icon}>
+      <img src={src} alt={alt} class={styles.icon} />
+    </div>
+  );
+});

package/src/components/icon/elm-language-icon.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmLanguageIcon, LANGUAGES } from "./elm-language-icon";
+
+const meta: Meta<typeof ElmLanguageIcon> = {
+  title: "Components/Icon/elm-language-icon",
+  component: ElmLanguageIcon,
+  tags: ["autodocs"],
+  args: {},
+  argTypes: {
+    language: {
+      control: "radio",
+      options: LANGUAGES,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: { language: "rust" },
+};

package/src/components/icon/elm-language-icon.tsx

@@ -0,0 +1,167 @@
+import { Component, component$ } from "@builder.io/qwik";
+
+// import styles from "./elm-language-icon.module.scss";
+
+import { type CommonLanguageProps } from "./languages/language-interface";
+
+import { Rust } from "./languages/rust";
+import { Javascript } from "./languages/javascript";
+import { Typescript } from "./languages/typescript";
+import { Bash } from "./languages/bash";
+import { Terraform } from "./languages/terraform";
+import { Html } from "./languages/html";
+import { Css } from "./languages/css";
+import { Npm } from "./languages/npm";
+import { Java } from "./languages/java";
+import { Kotlin } from "./languages/kotlin";
+import { Go } from "./languages/go";
+import { Python } from "./languages/python";
+import { Sql } from "./languages/sql";
+import { Json } from "./languages/json";
+import { Lua } from "./languages/lua";
+import { Csharp } from "./languages/c-sharp";
+import { Cplusplus } from "./languages/c-plus-plus";
+import { C } from "./languages/c";
+
+export const LANGUAGES = [
+  "rust",
+  "javascript",
+  "typescript",
+  "shell",
+  "terraform",
+  "html",
+  "css",
+  "npm",
+  "java",
+  "kotlin",
+  "go",
+  "python",
+  "sql",
+  "json",
+  "lua",
+  "csharp",
+  "cpp",
+  "c",
+  "file",
+] as const;
+
+export type Language = (typeof LANGUAGES)[number];
+
+export interface ElmLanguageIconProps {
+  /**
+   * The size of the icon.
+   */
+  size?: number;
+
+  /**
+   * The language of the icon.
+   */
+  language: Language | string;
+}
+
+const normalizeLanguage = (language: string): Language => {
+  switch (language) {
+    case "rust":
+    case "rs":
+      return "rust";
+
+    case "javascript":
+    case "js":
+      return "javascript";
+
+    case "typescript":
+    case "ts":
+      return "typescript";
+
+    case "bash":
+    case "sh":
+    case "shell":
+      return "shell";
+
+    case "tf":
+    case "terraform":
+    case "hcl":
+      return "terraform";
+
+    case "html":
+    case "html5":
+      return "html";
+
+    case "css":
+    case "css3":
+      return "css";
+
+    case "npm":
+      return "npm";
+
+    case "java":
+      return "java";
+
+    case "kotlin":
+    case "kt":
+      return "kotlin";
+
+    case "go":
+    case "golang":
+      return "go";
+
+    case "python":
+    case "py":
+      return "python";
+
+    case "sql":
+      return "sql";
+
+    case "json":
+      return "json";
+
+    case "lua":
+      return "lua";
+
+    case "cs":
+    case "c#":
+    case "csharp":
+      return "csharp";
+
+    case "cpp":
+    case "c++":
+      return "cpp";
+
+    case "c":
+    case "clang":
+      return "c";
+
+    default:
+      return "file";
+  }
+};
+
+const renderMap: Record<Language, Component<CommonLanguageProps>> = {
+  rust: Rust,
+  javascript: Javascript,
+  typescript: Typescript,
+  shell: Bash,
+  terraform: Terraform,
+  html: Html,
+  css: Css,
+  npm: Npm,
+  java: Java,
+  kotlin: Kotlin,
+  go: Go,
+  python: Python,
+  sql: Sql,
+  json: Json,
+  lua: Lua,
+  csharp: Csharp,
+  cpp: Cplusplus,
+  c: C,
+  file: () => null,
+};
+
+export const ElmLanguageIcon = component$<ElmLanguageIconProps>(
+  ({ size = 24, language }) => {
+    const Component = renderMap[normalizeLanguage(language)];
+
+    return <Component size={size} />;
+  },
+);

package/src/components/icon/elm-mdi-icon.module.scss

@@ -0,0 +1,8 @@
+.icon {
+  fill: var(--color, #555b67);
+  transition: fill 200ms;
+
+  [data-theme="dark"] & {
+    fill: var(--dark-color, #b0b5be);
+  }
+}

package/src/components/icon/elm-mdi-icon.stories.tsx

@@ -0,0 +1,25 @@
+import { type Meta, type StoryObj } from "storybook-framework-qwik";
+import { ElmMdiIcon } from "./elm-mdi-icon";
+import { mdiTag } from "@mdi/js";
+
+const meta: Meta<typeof ElmMdiIcon> = {
+  title: "Components/Icon/elm-mdi-icon",
+  component: ElmMdiIcon,
+  tags: ["autodocs"],
+  argTypes: {
+    color: { control: "color" },
+    lightColor: { control: "color" },
+    darkColor: { control: "color" },
+  },
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    size: "1.25rem",
+    d: mdiTag,
+  },
+};

package/src/components/icon/elm-mdi-icon.tsx

@@ -0,0 +1,34 @@
+import { component$ } from "@builder.io/qwik";
+
+import styles from "./elm-mdi-icon.module.scss";
+
+export interface ElmMdiIconProps {
+  d: string;
+  size?: string;
+  color?: string;
+  lightColor?: string;
+  darkColor?: string;
+}
+
+export const ElmMdiIcon = component$<ElmMdiIconProps>(
+  ({ d, size = "1em", color, lightColor, darkColor }) => {
+    return (
+      <svg
+        class={styles.icon}
+        style={{
+          "--color": lightColor ?? color,
+          "--dark-color": darkColor ?? color,
+        }}
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill={color}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        role="img"
+      >
+        <path d={d} />
+      </svg>
+    );
+  },
+);

package/src/components/icon/languages/bash.module.scss

@@ -0,0 +1,6 @@
+.path {
+  fill: #293138;
+  [data-theme="dark"] & {
+    fill: #d2dbe3;
+  }
+}

package/src/components/icon/languages/bash.tsx

@@ -0,0 +1,27 @@
+import { component$ } from "@builder.io/qwik";
+import styles from "./bash.module.scss";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Bash = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 128 128"
+        width={size}
+        height={size}
+        {...props}
+      >
+        <path fill="none" d="M4.24 4.24h119.53v119.53H4.24z" />
+        <path
+          class={styles.path}
+          d="M109.01 28.64L71.28 6.24c-2.25-1.33-4.77-2-7.28-2s-5.03.67-7.28 2.01l-37.74 22.4c-4.5 2.67-7.28 7.61-7.28 12.96v44.8c0 5.35 2.77 10.29 7.28 12.96l37.73 22.4c2.25 1.34 4.76 2 7.28 2c2.51 0 5.03-.67 7.28-2l37.74-22.4c4.5-2.67 7.28-7.62 7.28-12.96V41.6c0-5.34-2.77-10.29-7.28-12.96M79.79 98.59l.06 3.22c0 .39-.25.83-.55.99l-1.91 1.1c-.3.15-.56-.03-.56-.42l-.03-3.17c-1.63.68-3.29.84-4.34.42c-.2-.08-.29-.37-.21-.71l.69-2.91c.06-.23.18-.46.34-.6c.06-.06.12-.1.18-.13c.11-.06.22-.07.31-.03c1.14.38 2.59.2 3.99-.5c1.78-.9 2.97-2.72 2.95-4.52c-.02-1.64-.9-2.31-3.05-2.33c-2.74.01-5.3-.53-5.34-4.57c-.03-3.32 1.69-6.78 4.43-8.96l-.03-3.25c0-.4.24-.84.55-1l1.85-1.18c.3-.15.56.04.56.43l.03 3.25c1.36-.54 2.54-.69 3.61-.44c.23.06.34.38.24.75l-.72 2.88c-.06.22-.18.44-.33.58a.8.8 0 0 1-.19.14c-.1.05-.19.06-.28.05c-.49-.11-1.65-.36-3.48.56c-1.92.97-2.59 2.64-2.58 3.88c.02 1.48.77 1.93 3.39 1.97c3.49.06 4.99 1.58 5.03 5.09c.05 3.44-1.79 7.15-4.61 9.41m26.34-60.5l-35.7 22.05c-4.45 2.6-7.73 5.52-7.74 10.89v43.99c0 3.21 1.3 5.29 3.29 5.9c-.65.11-1.32.19-1.98.19c-2.09 0-4.15-.57-5.96-1.64l-37.73-22.4c-3.69-2.19-5.98-6.28-5.98-10.67V41.6c0-4.39 2.29-8.48 5.98-10.67l37.74-22.4c1.81-1.07 3.87-1.64 5.96-1.64s4.15.57 5.96 1.64l37.74 22.4c3.11 1.85 5.21 5.04 5.8 8.63c-1.27-2.67-4.09-3.39-7.38-1.47"
+        />
+        <path
+          fill="#4fa847"
+          d="m99.12 90.73l-9.4 5.62c-.25.15-.43.31-.43.61v2.46c0 .3.2.43.45.28l9.54-5.8c.25-.15.29-.42.29-.72v-2.17c0-.3-.2-.42-.45-.28"
+        />
+      </svg>
+    );
+  },
+);

package/src/components/icon/languages/c-plus-plus.tsx

@@ -0,0 +1,33 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Cplusplus = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 128 128"
+        width={size}
+        height={size}
+        {...props}
+      >
+        <path
+          fill="#00599c"
+          d="M118.766 95.82c.89-1.543 1.441-3.28 1.441-4.843V36.78c0-1.558-.55-3.297-1.441-4.84l-55.32 31.94Zm0 0"
+        />
+        <path
+          fill="#004482"
+          d="m68.36 126.586l46.933-27.094c1.352-.781 2.582-2.129 3.473-3.672l-55.32-31.94L8.12 95.82c.89 1.543 2.121 2.89 3.473 3.672l46.933 27.094c2.703 1.562 7.13 1.562 9.832 0Zm0 0"
+        />
+        <path
+          fill="#659ad2"
+          d="M118.766 31.941c-.891-1.546-2.121-2.894-3.473-3.671L68.359 1.172c-2.703-1.563-7.129-1.563-9.832 0L11.594 28.27C8.89 29.828 6.68 33.66 6.68 36.78v54.196c0 1.562.55 3.3 1.441 4.843L63.445 63.88Zm0 0"
+        />
+        <path
+          fill="#fff"
+          d="M63.445 26.035c-20.867 0-37.843 16.977-37.843 37.844s16.976 37.844 37.843 37.844c13.465 0 26.024-7.247 32.77-18.91L79.84 73.335c-3.38 5.84-9.66 9.465-16.395 9.465c-10.433 0-18.922-8.488-18.922-18.922s8.49-18.922 18.922-18.922c6.73 0 13.017 3.629 16.39 9.465l16.38-9.477c-6.75-11.664-19.305-18.91-32.77-18.91zM92.88 57.57v4.207h-4.207v4.203h4.207v4.207h4.203V65.98h4.203v-4.203h-4.203V57.57zm15.766 0v4.207h-4.204v4.203h4.204v4.207h4.207V65.98h4.203v-4.203h-4.203V57.57z"
+        />
+      </svg>
+    );
+  },
+);

package/src/components/icon/languages/c-sharp.tsx

@@ -0,0 +1,29 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Csharp = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 128 128"
+        width={size}
+        height={size}
+        {...props}
+      >
+        <path
+          fill="#9b4f96"
+          d="M115.4 30.7L67.1 2.9c-.8-.5-1.9-.7-3.1-.7s-2.3.3-3.1.7l-48 27.9c-1.7 1-2.9 3.5-2.9 5.4v55.7c0 1.1.2 2.4 1 3.5l106.8-62c-.6-1.2-1.5-2.1-2.4-2.7"
+        />
+        <path
+          fill="#68217a"
+          d="M10.7 95.3c.5.8 1.2 1.5 1.9 1.9l48.2 27.9c.8.5 1.9.7 3.1.7s2.3-.3 3.1-.7l48-27.9c1.7-1 2.9-3.5 2.9-5.4V36.1c0-.9-.1-1.9-.6-2.8z"
+        />
+        <path
+          fill="#fff"
+          d="M85.3 76.1C81.1 83.5 73.1 88.5 64 88.5c-13.5 0-24.5-11-24.5-24.5s11-24.5 24.5-24.5c9.1 0 17.1 5 21.3 12.5l13-7.5c-6.8-11.9-19.6-20-34.3-20c-21.8 0-39.5 17.7-39.5 39.5s17.7 39.5 39.5 39.5c14.6 0 27.4-8 34.2-19.8zM97 66.2l.9-4.3h-4.2v-4.7h5.1L100 51h4.9l-1.2 6.1h3.8l1.2-6.1h4.8l-1.2 6.1h2.4v4.7h-3.3l-.9 4.3h4.2v4.7h-5.1l-1.2 6h-4.9l1.2-6h-3.8l-1.2 6h-4.8l1.2-6h-2.4v-4.7H97zm4.8 0h3.8l.9-4.3h-3.8z"
+        />
+      </svg>
+    );
+  },
+);

package/src/components/icon/languages/c.tsx

@@ -0,0 +1,27 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const C = component$<CommonLanguageProps>(({ size = 24, ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 128 128"
+      width={size}
+      height={size}
+      {...props}
+    >
+      <path
+        fill="#659ad3"
+        d="M115.4 30.7L67.1 2.9c-.8-.5-1.9-.7-3.1-.7s-2.3.3-3.1.7l-48 27.9c-1.7 1-2.9 3.5-2.9 5.4v55.7c0 1.1.2 2.4 1 3.5l106.8-62c-.6-1.2-1.5-2.1-2.4-2.7"
+      />
+      <path
+        fill="#03599c"
+        d="M10.7 95.3c.5.8 1.2 1.5 1.9 1.9l48.2 27.9c.8.5 1.9.7 3.1.7s2.3-.3 3.1-.7l48-27.9c1.7-1 2.9-3.5 2.9-5.4V36.1c0-.9-.1-1.9-.6-2.8z"
+      />
+      <path
+        fill="#fff"
+        d="M85.3 76.1C81.1 83.5 73.1 88.5 64 88.5c-13.5 0-24.5-11-24.5-24.5s11-24.5 24.5-24.5c9.1 0 17.1 5 21.3 12.5l13-7.5c-6.8-11.9-19.6-20-34.3-20c-21.8 0-39.5 17.7-39.5 39.5s17.7 39.5 39.5 39.5c14.6 0 27.4-8 34.2-19.8z"
+      />
+    </svg>
+  );
+});

package/src/components/icon/languages/css.tsx

@@ -0,0 +1,21 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Css = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width={size}
+        height={size}
+        {...props}
+      >
+        <path
+          fill="#3f9de9"
+          d="m5 3l-.65 3.34h13.59L17.5 8.5H3.92l-.66 3.33h13.59l-.76 3.81l-5.48 1.81l-4.75-1.81l.33-1.64H2.85l-.79 4l7.85 3l9.05-3l1.2-6.03l.24-1.21L21.94 3z"
+        />
+      </svg>
+    );
+  },
+);

package/src/components/icon/languages/go.tsx

@@ -0,0 +1,22 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Go = component$<CommonLanguageProps>(({ size = 24, ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 128 128"
+      {...props}
+    >
+      <g fill="#00acd7" fill-rule="evenodd">
+        <path d="M11.156 54.829c-.243 0-.303-.122-.182-.303l1.273-1.637c.12-.182.424-.303.666-.303H34.55c.243 0 .303.182.182.364l-1.03 1.576c-.121.181-.424.363-.606.363zm-9.152 5.575c-.242 0-.303-.12-.182-.303l1.273-1.636c.121-.182.424-.303.667-.303h27.636c.242 0 .364.182.303.364l-.485 1.454c-.06.243-.303.364-.545.364zM16.67 65.98c-.242 0-.302-.182-.181-.364l.848-1.515c.122-.182.364-.363.607-.363h12.12c.243 0 .364.181.364.424l-.12 1.454c0 .243-.243.425-.425.425zm62.91-12.242c-3.819.97-6.425 1.697-10.182 2.666c-.91.243-.97.303-1.758-.606c-.909-1.03-1.576-1.697-2.848-2.303c-3.819-1.878-7.516-1.333-10.97.91c-4.121 2.666-6.242 6.605-6.182 11.514c.06 4.849 3.394 8.849 8.182 9.516c4.121.545 7.576-.91 10.303-4c.545-.667 1.03-1.394 1.636-2.243H56.064c-1.272 0-1.575-.788-1.151-1.818c.788-1.879 2.242-5.03 3.09-6.606c.183-.364.607-.97 1.516-.97h22.06c-.12 1.637-.12 3.273-.363 4.91c-.667 4.363-2.303 8.363-4.97 11.878c-4.364 5.758-10.06 9.333-17.273 10.303c-5.939.788-11.454-.364-16.302-4c-4.485-3.394-7.03-7.879-7.697-13.454c-.788-6.606 1.151-12.546 5.151-17.758c4.303-5.636 10-9.212 16.97-10.485c5.697-1.03 11.151-.363 16.06 2.97c3.212 2.121 5.515 5.03 7.03 8.545c.364.546.122.849-.606 1.03z" />
+        <path
+          fill-rule="nonzero"
+          d="M99.64 87.253c-5.515-.122-10.546-1.697-14.788-5.334c-3.576-3.09-5.818-7.03-6.545-11.697c-1.091-6.848.787-12.909 4.909-18.302c4.424-5.819 9.757-8.849 16.97-10.122c6.181-1.09 12-.484 17.272 3.091c4.788 3.273 7.757 7.697 8.545 13.515c1.03 8.182-1.333 14.849-6.97 20.546c-4 4.06-8.909 6.606-14.545 7.757c-1.636.303-3.273.364-4.848.546m14.424-24.485c-.06-.788-.06-1.394-.182-2c-1.09-6-6.606-9.394-12.363-8.06c-5.637 1.272-9.273 4.848-10.606 10.545c-1.091 4.727 1.212 9.515 5.575 11.454c3.334 1.455 6.667 1.273 9.879-.363c4.788-2.485 7.394-6.364 7.697-11.576"
+        />
+      </g>
+    </svg>
+  );
+});

package/src/components/icon/languages/html.tsx

@@ -0,0 +1,30 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Html = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 128 128"
+        {...props}
+      >
+        <path
+          fill="#e44d26"
+          d="M19.037 113.876L9.032 1.661h109.936l-10.016 112.198l-45.019 12.48z"
+        />
+        <path fill="#f16529" d="m64 116.8l36.378-10.086l8.559-95.878H64z" />
+        <path
+          fill="#ebebeb"
+          d="M64 52.455H45.788L44.53 38.361H64V24.599H29.489l.33 3.692l3.382 37.927H64zm0 35.743l-.061.017l-15.327-4.14l-.979-10.975H33.816l1.928 21.609l28.193 7.826l.063-.017z"
+        />
+        <path
+          fill="#fff"
+          d="M63.952 52.455v13.763h16.947l-1.597 17.849l-15.35 4.143v14.319l28.215-7.82l.207-2.325l3.234-36.233l.335-3.696h-3.708zm0-27.856v13.762h33.244l.276-3.092l.628-6.978l.329-3.692z"
+        />
+      </svg>
+    );
+  },
+);