feat(icons): add BuiltIn, Custom, Filter, User, and update Search (#889)

* feat(icons): add BuiltIn, Custom, Filter, User, and update Search

* fix(icons): fix ProductTwiMLBinsIcon casing

Co-authored-by: Sarah Li <sali@twilio.com>

packages/paste-icons/src/BuiltInIcon.tsx

@@ -0,0 +1,35 @@
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+import * as React from 'react';
+import {useUID} from '@twilio-paste/uid-library';
+import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper';
+
+export interface BuiltInIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const BuiltInIcon: React.FC<BuiltInIconProps> = ({as, display, size, color, title, decorative}) => {
+  const titleId = `BuiltInIcon-${useUID()}`;
+
+  if (!decorative && title == null) {
+    throw new Error('[BuiltInIcon]: Missing a title for non-decorative icon.');
+  }
+
+  return (
+    <IconWrapper as={as} display={display} size={size} color={color}>
+      <svg role="img" aria-hidden={decorative} width="100%" height="100%" viewBox="0 0 20 20" aria-labelledby={titleId}>
+        {title ? <title id={titleId}>{title}</title> : null}
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M16.5 2A1.5 1.5 0 0118 3.5v13a1.5 1.5 0 01-1.5 1.5h-13A1.5 1.5 0 012 16.5v-13A1.5 1.5 0 013.5 2h13zm0 1h-13a.5.5 0 00-.492.41L3 3.5v13a.5.5 0 00.41.492L3.5 17h13a.5.5 0 00.492-.41L17 16.5v-13a.5.5 0 00-.41-.492L16.5 3zM9 10.5l.176.008A2 2 0 0110.937 12L14.501 12a.5.5 0 01.09.992L14.5 13l-3.564.001a2 2 0 01-3.873 0L5.501 13a.5.5 0 01-.09-.992L5.5 12h1.563A2 2 0 019 10.5zm0 1l-.116.007A1 1 0 109 11.5zm4.001-6a2 2 0 11-1.937 2.501L5.5 8a.5.5 0 01-.09-.992L5.5 7h5.563A2 2 0 0113 5.5zm0 1a1 1 0 100 2 1 1 0 000-2z"
+        />
+      </svg>
+    </IconWrapper>
+  );
+};
+
+BuiltInIcon.displayName = 'BuiltInIcon';
+export {BuiltInIcon};

packages/paste-icons/src/CustomIcon.tsx

@@ -0,0 +1,35 @@
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+import * as React from 'react';
+import {useUID} from '@twilio-paste/uid-library';
+import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper';
+
+export interface CustomIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const CustomIcon: React.FC<CustomIconProps> = ({as, display, size, color, title, decorative}) => {
+  const titleId = `CustomIcon-${useUID()}`;
+
+  if (!decorative && title == null) {
+    throw new Error('[CustomIcon]: Missing a title for non-decorative icon.');
+  }
+
+  return (
+    <IconWrapper as={as} display={display} size={size} color={color}>
+      <svg role="img" aria-hidden={decorative} width="100%" height="100%" viewBox="0 0 20 20" aria-labelledby={titleId}>
+        {title ? <title id={titleId}>{title}</title> : null}
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M9.499 5a.5.5 0 01.09.991L9.499 6h-5a.5.5 0 00-.492.41l-.008.09v10a.5.5 0 00.41.492l.09.008h10a.5.5 0 00.492-.41l.008-.09v-5a.5.5 0 01.992-.09l.008.09v5a1.5 1.5 0 01-1.356 1.493L14.5 18h-10a1.5 1.5 0 01-1.493-1.355l-.007-.145v-10a1.5 1.5 0 011.355-1.493L4.5 5h5zm7.114-2.922a8.613 8.613 0 011.892-.036.5.5 0 01.443.44c.307 2.7-.796 4.997-2.75 6.443-1.507 1.115-3.301 1.517-4.374.948l-2.151 2.152a.5.5 0 01-.765-.638l.058-.07 2.152-2.152c-.828-1.58.522-4.69 2.604-6.08.827-.553 1.817-.872 2.891-1.007zm1.25.929a8.342 8.342 0 00-1.125.064c-.932.117-1.778.389-2.46.845-1.568 1.048-2.628 3.33-2.39 4.479l2.967-2.967a.5.5 0 01.765.638l-.058.07L12.6 9.099c.724.15 1.929-.182 3.005-.978 1.548-1.146 2.466-2.9 2.39-4.995l-.007-.117z"
+        />
+      </svg>
+    </IconWrapper>
+  );
+};
+
+CustomIcon.displayName = 'CustomIcon';
+export {CustomIcon};

packages/paste-icons/src/FilterIcon.tsx

@@ -0,0 +1,35 @@
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+import * as React from 'react';
+import {useUID} from '@twilio-paste/uid-library';
+import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper';
+
+export interface FilterIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const FilterIcon: React.FC<FilterIconProps> = ({as, display, size, color, title, decorative}) => {
+  const titleId = `FilterIcon-${useUID()}`;
+
+  if (!decorative && title == null) {
+    throw new Error('[FilterIcon]: Missing a title for non-decorative icon.');
+  }
+
+  return (
+    <IconWrapper as={as} display={display} size={size} color={color}>
+      <svg role="img" aria-hidden={decorative} width="100%" height="100%" viewBox="0 0 20 20" aria-labelledby={titleId}>
+        {title ? <title id={titleId}>{title}</title> : null}
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M12 13a1 1 0 010 2H8a1 1 0 010-2h4zm2-4a1 1 0 010 2H6a1 1 0 010-2h8zm2-4a1 1 0 010 2H4a1 1 0 110-2h12z"
+        />
+      </svg>
+    </IconWrapper>
+  );
+};
+
+FilterIcon.displayName = 'FilterIcon';
+export {FilterIcon};

packages/paste-icons/src/SearchIcon.tsx

@@ -24,7 +24,7 @@ const SearchIcon: React.FC<SearchIconProps> = ({as, display, size, color, title,
         <path
           fill="currentColor"
           fillRule="evenodd"
-          d="M5.527 5.527a5.213 5.213 0 017.722 6.984l2.598 2.6a.521.521 0 11-.737.736l-2.598-2.598a5.213 5.213 0 01-6.985-7.722zm.737.737a4.17 4.17 0 105.897 5.897 4.17 4.17 0 00-5.897-5.897z"
+          d="M5.43 5.43a4.882 4.882 0 017.383 6.347l2.973 2.973a.732.732 0 01-1.036 1.036l-2.973-2.973A4.883 4.883 0 015.43 5.43zm1.035 1.035a3.417 3.417 0 104.833 4.833 3.417 3.417 0 00-4.833-4.833z"
         />
       </svg>
     </IconWrapper>

packages/paste-icons/src/UserIcon.tsx

@@ -0,0 +1,34 @@
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+import * as React from 'react';
+import {useUID} from '@twilio-paste/uid-library';
+import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper';
+
+export interface UserIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const UserIcon: React.FC<UserIconProps> = ({as, display, size, color, title, decorative}) => {
+  const titleId = `UserIcon-${useUID()}`;
+
+  if (!decorative && title == null) {
+    throw new Error('[UserIcon]: Missing a title for non-decorative icon.');
+  }
+
+  return (
+    <IconWrapper as={as} display={display} size={size} color={color}>
+      <svg role="img" aria-hidden={decorative} width="100%" height="100%" viewBox="0 0 20 20" aria-labelledby={titleId}>
+        {title ? <title id={titleId}>{title}</title> : null}
+        <path
+          fill="currentColor"
+          d="M10.302 10a6.309 6.309 0 016.3 6.301.566.566 0 11-1.131 0 5.17 5.17 0 00-10.339 0 .566.566 0 11-1.132 0 6.309 6.309 0 016.07-6.297l.232-.004zm-.155-8a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm0 1.085a2.415 2.415 0 100 4.831 2.415 2.415 0 000-4.831z"
+        />
+      </svg>
+    </IconWrapper>
+  );
+};
+
+UserIcon.displayName = 'UserIcon';
+export {UserIcon};