feat: add new icons (#516)

* feat: add new icons

* refactor: duplicate filename logic

scripts/utilities/__snapshots__/generate-icon-components.spec.ts.snap

@@ -285,6 +285,8 @@ exports[`generate > \`/src/components/index.ts\` file > has exports that match t
   "CheckCircleIcon",
   "CheckSmallIcon",
   "CheckIcon",
+  "ChevronDoubleLeftIcon",
+  "ChevronDoubleRightIcon",
   "ChevronDownIcon",
   "ChevronLeftIcon",
   "ChevronRightIcon",
@@ -302,6 +304,7 @@ exports[`generate > \`/src/components/index.ts\` file > has exports that match t
   "CogIcon",
   "CollapsePanelIcon",
   "CollapseIcon",
+  "ColorsIcon",
   "ConnectionsIcon",
   "CopyIcon",
   "DangerCircleIcon",
@@ -366,6 +369,7 @@ exports[`generate > \`/src/components/index.ts\` file > has exports that match t
   "OrganizationIcon",
   "OverviewIcon",
   "PeopleIcon",
+  "PhoneIcon",
   "PlugIcon",
   "PortalIcon",
   "PresentationIcon",
@@ -393,6 +397,7 @@ exports[`generate > \`/src/components/index.ts\` file > has exports that match t
   "TableColumnsIcon",
   "TableRowsIcon",
   "TableIcon",
+  "TabletIcon",
   "TasklistIcon",
   "TeamIcon",
   "TeammateIcon",
@@ -401,6 +406,7 @@ exports[`generate > \`/src/components/index.ts\` file > has exports that match t
   "TrashIcon",
   "TrendDownIcon",
   "TrendUpIcon",
+  "TvIcon",
   "UnderlineIcon",
   "UnfoldMoreIcon",
   "UploadIcon",

scripts/utilities/generate-icon-components.ts

@@ -39,14 +39,21 @@ export default async function generate() {
       process.exit(0)
     }
 
-    // Check if there are duplicate SVG filenames
+    // Check if there are duplicate SVG filenames in the "flags" and "multi-color" directories
     const uniqueFilenames = new Set<string>()
     for (const filepath of svgFiles) {
+      const parentDir = path.basename(path.dirname(filepath))
+      // Do not need to check for duplicates in the "flags" directory since they are prefixed with `Flag*`
+      if (parentDir === 'flags') {
+        continue
+      }
+
       const name = basename(filepath)
       if (!uniqueFilenames.has(name)) {
         uniqueFilenames.add(name)
       } else {
-        console.log(pc.red(`Duplicate SVG filename '${name}' found. All SVG source files must have a unique name.`))
+        console.log(pc.red(`Duplicate SVG filename '${name}' found.`))
+        console.log(pc.red('All SVG source files in the "svg/solid" and "svg/multi-color" directories must have a unique filename.'))
         console.log('')
         process.exit(1)
       }

src/tests/__snapshots__/ChevronDoubleLeftIcon.html

@@ -0,0 +1 @@
+<span class="kui-icon chevron-double-left-icon" data-testid="kui-icon-wrapper-chevron-double-left-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-testid="kui-icon-svg-chevron-double-left-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-testid="kui-icon-svg-title">My custom title</title><path d="M7.8248 12L11.6998 15.9C11.8831 16.0833 11.979 16.3125 11.9873 16.5875C11.9956 16.8625 11.8998 17.1 11.6998 17.3C11.5165 17.4833 11.2831 17.575 10.9998 17.575C10.7165 17.575 10.4831 17.4833 10.2998 17.3L5.6998 12.7C5.5998 12.6 5.52897 12.4917 5.4873 12.375C5.44564 12.2583 5.4248 12.1333 5.4248 12C5.4248 11.8667 5.44564 11.7417 5.4873 11.625C5.52897 11.5083 5.5998 11.4 5.6998 11.3L10.2998 6.69999C10.4831 6.51665 10.7123 6.42082 10.9873 6.41249C11.2623 6.40415 11.4998 6.49999 11.6998 6.69999C11.8831 6.88332 11.9748 7.11665 11.9748 7.39999C11.9748 7.68332 11.8831 7.91665 11.6998 8.09999L7.8248 12ZM14.4248 12L18.2998 15.9C18.4831 16.0833 18.579 16.3125 18.5873 16.5875C18.5956 16.8625 18.4998 17.1 18.2998 17.3C18.1165 17.4833 17.8831 17.575 17.5998 17.575C17.3165 17.575 17.0831 17.4833 16.8998 17.3L12.2998 12.7C12.1998 12.6 12.129 12.4917 12.0873 12.375C12.0456 12.2583 12.0248 12.1333 12.0248 12C12.0248 11.8667 12.0456 11.7417 12.0873 11.625C12.129 11.5083 12.1998 11.4 12.2998 11.3L16.8998 6.69999C17.0831 6.51665 17.3123 6.42082 17.5873 6.41249C17.8623 6.40415 18.0998 6.49999 18.2998 6.69999C18.4831 6.88332 18.5748 7.11665 18.5748 7.39999C18.5748 7.68332 18.4831 7.91665 18.2998 8.09999L14.4248 12Z" fill="currentColor"></path></svg></span>

src/tests/__snapshots__/ChevronDoubleRightIcon.html

@@ -0,0 +1 @@
+<span class="kui-icon chevron-double-right-icon" data-testid="kui-icon-wrapper-chevron-double-right-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-testid="kui-icon-svg-chevron-double-right-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-testid="kui-icon-svg-title">My custom title</title><path d="M9.57511 12L5.70011 8.09999C5.51678 7.91665 5.42094 7.68749 5.41261 7.41249C5.40428 7.13749 5.50011 6.89999 5.70011 6.69999C5.88344 6.51665 6.11678 6.42499 6.40011 6.42499C6.68344 6.42499 6.91678 6.51665 7.10011 6.69999L11.7001 11.3C11.8001 11.4 11.8709 11.5083 11.9126 11.625C11.9543 11.7417 11.9751 11.8667 11.9751 12C11.9751 12.1333 11.9543 12.2583 11.9126 12.375C11.8709 12.4917 11.8001 12.6 11.7001 12.7L7.10011 17.3C6.91678 17.4833 6.68761 17.5792 6.41261 17.5875C6.13761 17.5958 5.90011 17.5 5.70011 17.3C5.51678 17.1167 5.42511 16.8833 5.42511 16.6C5.42511 16.3167 5.51678 16.0833 5.70011 15.9L9.57511 12ZM16.1751 12L12.3001 8.09999C12.1168 7.91665 12.0209 7.68749 12.0126 7.41249C12.0043 7.13749 12.1001 6.89999 12.3001 6.69999C12.4834 6.51665 12.7168 6.42499 13.0001 6.42499C13.2834 6.42499 13.5168 6.51665 13.7001 6.69999L18.3001 11.3C18.4001 11.4 18.4709 11.5083 18.5126 11.625C18.5543 11.7417 18.5751 11.8667 18.5751 12C18.5751 12.1333 18.5543 12.2583 18.5126 12.375C18.4709 12.4917 18.4001 12.6 18.3001 12.7L13.7001 17.3C13.5168 17.4833 13.2876 17.5792 13.0126 17.5875C12.7376 17.5958 12.5001 17.5 12.3001 17.3C12.1168 17.1167 12.0251 16.8833 12.0251 16.6C12.0251 16.3167 12.1168 16.0833 12.3001 15.9L16.1751 12Z" fill="currentColor"></path></svg></span>

src/tests/__snapshots__/ColorsIcon.html

@@ -0,0 +1 @@
+<span class="kui-icon colors-icon" data-testid="kui-icon-wrapper-colors-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-testid="kui-icon-svg-colors-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-testid="kui-icon-svg-title">My custom title</title><path d="M8.65 20.5L2.5 14.35C2.33333 14.1833 2.20833 14 2.125 13.8C2.04167 13.6 2 13.3916 2 13.175C2 12.9583 2.04167 12.75 2.125 12.55C2.20833 12.35 2.33333 12.1666 2.5 12L8.25 6.27498L6.375 4.39998C6.15833 4.18331 6.04583 3.92498 6.0375 3.62498C6.02917 3.32498 6.13333 3.05831 6.35 2.82498C6.56667 2.59164 6.83333 2.47498 7.15 2.47498C7.46667 2.47498 7.74167 2.59164 7.975 2.82498L17.15 12C17.3167 12.1666 17.4375 12.35 17.5125 12.55C17.5875 12.75 17.625 12.9583 17.625 13.175C17.625 13.3916 17.5875 13.6 17.5125 13.8C17.4375 14 17.3167 14.1833 17.15 14.35L11 20.5C10.8333 20.6666 10.65 20.7916 10.45 20.875C10.25 20.9583 10.0417 21 9.825 21C9.60833 21 9.4 20.9583 9.2 20.875C9 20.7916 8.81667 20.6666 8.65 20.5ZM9.825 7.84998L4.475 13.2H15.175L9.825 7.84998ZM19.8 21C19.2 21 18.6917 20.7875 18.275 20.3625C17.8583 19.9375 17.65 19.4166 17.65 18.8C17.65 18.35 17.7625 17.925 17.9875 17.525C18.2125 17.125 18.4667 16.7333 18.75 16.35L19.225 15.75C19.375 15.5666 19.5708 15.4708 19.8125 15.4625C20.0542 15.4541 20.25 15.5416 20.4 15.725L20.9 16.35C21.1667 16.7333 21.4167 17.125 21.65 17.525C21.8833 17.925 22 18.35 22 18.8C22 19.4166 21.7833 19.9375 21.35 20.3625C20.9167 20.7875 20.4 21 19.8 21Z" fill="currentColor"></path></svg></span>

src/tests/__snapshots__/PhoneIcon.html

@@ -0,0 +1 @@
+<span class="kui-icon phone-icon" data-testid="kui-icon-wrapper-phone-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-testid="kui-icon-svg-phone-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-testid="kui-icon-svg-title">My custom title</title><path d="M7 23C6.45 23 5.97917 22.8042 5.5875 22.4125C5.19583 22.0208 5 21.55 5 21V3C5 2.45 5.19583 1.97917 5.5875 1.5875C5.97917 1.19583 6.45 1 7 1H17C17.55 1 18.0208 1.19583 18.4125 1.5875C18.8042 1.97917 19 2.45 19 3V21C19 21.55 18.8042 22.0208 18.4125 22.4125C18.0208 22.8042 17.55 23 17 23H7ZM7 18V21H17V18H7ZM12 20.5C12.2833 20.5 12.5208 20.4042 12.7125 20.2125C12.9042 20.0208 13 19.7833 13 19.5C13 19.2167 12.9042 18.9792 12.7125 18.7875C12.5208 18.5958 12.2833 18.5 12 18.5C11.7167 18.5 11.4792 18.5958 11.2875 18.7875C11.0958 18.9792 11 19.2167 11 19.5C11 19.7833 11.0958 20.0208 11.2875 20.2125C11.4792 20.4042 11.7167 20.5 12 20.5ZM7 16H17V6H7V16ZM7 4H17V3H7V4Z" fill="currentColor"></path></svg></span>

src/tests/__snapshots__/TabletIcon.html

@@ -0,0 +1 @@
+<span class="kui-icon tablet-icon" data-testid="kui-icon-wrapper-tablet-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-testid="kui-icon-svg-tablet-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-testid="kui-icon-svg-title">My custom title</title><path d="M12 20.5C12.2833 20.5 12.5208 20.4042 12.7125 20.2125C12.9042 20.0208 13 19.7833 13 19.5C13 19.2167 12.9042 18.9792 12.7125 18.7875C12.5208 18.5958 12.2833 18.5 12 18.5C11.7167 18.5 11.4792 18.5958 11.2875 18.7875C11.0958 18.9792 11 19.2167 11 19.5C11 19.7833 11.0958 20.0208 11.2875 20.2125C11.4792 20.4042 11.7167 20.5 12 20.5ZM5 23C4.45 23 3.97917 22.8042 3.5875 22.4125C3.19583 22.0208 3 21.55 3 21V3C3 2.45 3.19583 1.97917 3.5875 1.5875C3.97917 1.19583 4.45 1 5 1H19C19.55 1 20.0208 1.19583 20.4125 1.5875C20.8042 1.97917 21 2.45 21 3V21C21 21.55 20.8042 22.0208 20.4125 22.4125C20.0208 22.8042 19.55 23 19 23H5ZM5 18V21H19V18H5ZM5 16H19V6H5V16ZM5 4H19V3H5V4Z" fill="currentColor"></path></svg></span>

src/tests/__snapshots__/TelevisionIcon.html

@@ -0,0 +1 @@
+<span class="kui-icon television-icon" data-testid="kui-icon-wrapper-television-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-testid="kui-icon-svg-television-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-testid="kui-icon-svg-title">My custom title</title><path d="M4 19C3.45 19 2.97917 18.8042 2.5875 18.4125C2.19583 18.0208 2 17.55 2 17V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V17C22 17.55 21.8042 18.0208 21.4125 18.4125C21.0208 18.8042 20.55 19 20 19H16V20C16 20.2833 15.9042 20.5208 15.7125 20.7125C15.5208 20.9042 15.2833 21 15 21H9C8.71667 21 8.47917 20.9042 8.2875 20.7125C8.09583 20.5208 8 20.2833 8 20V19H4ZM4 17H20V5H4V17Z" fill="currentColor"></path></svg></span>

src/tests/__snapshots__/TvIcon.html

@@ -0,0 +1 @@
+<span class="kui-icon tv-icon" data-testid="kui-icon-wrapper-tv-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-testid="kui-icon-svg-tv-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-testid="kui-icon-svg-title">My custom title</title><path d="M4 19C3.45 19 2.97917 18.8042 2.5875 18.4125C2.19583 18.0208 2 17.55 2 17V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V17C22 17.55 21.8042 18.0208 21.4125 18.4125C21.0208 18.8042 20.55 19 20 19H16V20C16 20.2833 15.9042 20.5208 15.7125 20.7125C15.5208 20.9042 15.2833 21 15 21H9C8.71667 21 8.47917 20.9042 8.2875 20.7125C8.09583 20.5208 8 20.2833 8 20V19H4ZM4 17H20V5H4V17Z" fill="currentColor"></path></svg></span>