Defined Carbon icons directly inside this library rather than importi…

…ng them from carbon-icons-qwik, to get around compilation error in showcase project

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 (The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).)
 
+## [0.0.19](https://github.com/iancharlesdouglas/carbon-icons-qwik/releases/tag/0.0.19) - 2024-04-22
+|Added|Fixed|Changed|Removed|
+|-|-|-|-|
+|Embedded source components for certain Carbon icons|-|-|References to carbon-icons-qwik icons|
+
 ## [0.0.18](https://github.com/iancharlesdouglas/carbon-icons-qwik/releases/tag/0.0.18) - 2024-04-22
 |Added|Fixed|Changed|Removed|
 |-|-|-|-|

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-qwik",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Carbon Design System components implemented as Qwik components",
   "license": "Apache-2.0",
   "main": "./lib/index.qwik.mjs",

src/components/dropdown/dropdown.tsx

@@ -24,6 +24,7 @@ import './dropdown.scss';
 import { removeProps } from '../../internal/objects/remove-props';
 import { itemsEqual } from '../../internal/qombobox/items-equal';
 import { itemDisabled } from '../../internal/qombobox/item-disabled';
+import { Checkmark } from '../../internal/icons/checkmark';
 
 /**
  * Listbox item that has a label
@@ -377,9 +378,9 @@ export const Dropdown = component$((props: DropdownProps) => {
                 >
                   {ItemToElement && <ItemToElement item={item} index={index} />}
                   {!ItemToElement && itemToString(item)}
-                  {/* {itemSelected && !ItemToElement && (
+                  {itemSelected && !ItemToElement && (
                     <Checkmark class={`${prefix}--list-box__menu-item__selected-icon`} size={16} />
-                  )} */}
+                  )}
                 </ListBoxMenuItem>
               );
             })}

src/components/list-box/list-box-menu-icon.tsx

@@ -1,7 +1,7 @@
 import { component$ } from '@builder.io/qwik';
 import { usePrefix } from '../../internal/hooks/use-prefix';
 import classNames from 'classnames';
-import { ChevronDown } from 'carbon-icons-qwik';
+import { ChevronDown } from '../../internal/icons/chevron--down';
 
 /**
  * ListBoxMenuIcon props

src/internal/icons/checkmark.tsx

@@ -0,0 +1,25 @@
+import { component$ } from '@builder.io/qwik';
+import { IconProps, IconPropsSvg } from 'carbon-icons-qwik';
+
+/**
+ * Checkmark icon (to get around compilation error when using carbon-icons-qwik icon)
+ */
+export const Checkmark = component$((props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    x="0px"
+    y="0px"
+    width={(props.size ?? 32) + 'px'}
+    height={props.size ?? 32 + 'px'}
+    viewBox="0 0 32 32"
+    {...(props as IconPropsSvg)}
+    fill={props.fill ?? 'currentColor'}
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+      <path d="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z" />
+    </svg>
+    {props.title && <title>{props.title}</title>}
+  </svg>
+));

src/internal/icons/chevron--down.tsx

@@ -0,0 +1,25 @@
+import { component$ } from '@builder.io/qwik';
+import { IconProps, IconPropsSvg } from 'carbon-icons-qwik';
+
+/**
+ * ChevronDown icon (to get around compilation error when using carbon-icons-qwik icon)
+ */
+export const ChevronDown = component$((props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    x="0px"
+    y="0px"
+    width={(props.size ?? 32) + 'px'}
+    height={props.size ?? 32 + 'px'}
+    viewBox="0 0 32 32"
+    {...(props as IconPropsSvg)}
+    fill={props.fill ?? 'currentColor'}
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6">
+      <path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z" />
+    </svg>
+    {props.title && <title>{props.title}</title>}
+  </svg>
+));

src/internal/icons/close.tsx

@@ -0,0 +1,25 @@
+import { component$ } from '@builder.io/qwik';
+import { IconProps, IconPropsSvg } from 'carbon-icons-qwik';
+
+/**
+ * Close icon (to get around compilation error when using carbon-icons-qwik icon)
+ */
+export const Close = component$((props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    x="0px"
+    y="0px"
+    width={(props.size ?? 32) + 'px'}
+    height={props.size ?? 32 + 'px'}
+    viewBox="0 0 32 32"
+    {...(props as IconPropsSvg)}
+    fill={props.fill ?? 'currentColor'}
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+      <path d="M17.4141 16L24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z" />
+    </svg>
+    {props.title && <title>{props.title}</title>}
+  </svg>
+));

src/internal/icons/warning--alt--filled.tsx

@@ -0,0 +1,31 @@
+import { component$ } from '@builder.io/qwik';
+import { IconProps, IconPropsSvg } from 'carbon-icons-qwik';
+
+/**
+ * WarningAltFilled icon (to get around compilation error when using carbon-icons-qwik icon)
+ */
+export const WarningAltFilled = component$((props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    x="0px"
+    y="0px"
+    width={(props.size ?? 32) + 'px'}
+    height={props.size ?? 32 + 'px'}
+    viewBox="0 0 32 32"
+    {...(props as IconPropsSvg)}
+    fill={props.fill ?? 'currentColor'}
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+      <path
+        fill="none"
+        d="M16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Zm-1.125-5h2.25V12h-2.25Z"
+        data-icon-path="inner-path"
+      />
+      <path d="M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z" />
+      <path d="M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z" />
+    </svg>
+    {props.title && <title>{props.title}</title>}
+  </svg>
+));

src/internal/icons/warning--filled.tsx

@@ -0,0 +1,31 @@
+import { component$ } from '@builder.io/qwik';
+import { IconProps, IconPropsSvg } from 'carbon-icons-qwik';
+
+/**
+ * WarningFilled icon (to get around compilation error when using carbon-icons-qwik icon)
+ */
+export const WarningFilled = component$((props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    x="0px"
+    y="0px"
+    width={(props.size ?? 32) + 'px'}
+    height={props.size ?? 32 + 'px'}
+    viewBox="0 0 32 32"
+    {...(props as IconPropsSvg)}
+    fill={props.fill ?? 'currentColor'}
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+      <path d="M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14C30,8.3,23.7,2,16,2z M14.9,8h2.2v11h-2.2V8z M16,25	c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22c0.8,0,1.5,0.7,1.5,1.5S16.8,25,16,25z" />
+      <path
+        fill="none"
+        d="M17.5,23.5c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22	C16.8,22,17.5,22.7,17.5,23.5z M17.1,8h-2.2v11h2.2V8z"
+        data-icon-path="inner-path"
+        opacity="0"
+      />
+    </svg>
+    {props.title && <title>{props.title}</title>}
+  </svg>
+));