feat(icons): adding toolbar related icons (#1837)

twilio-labs · Sep 2, 2021 · 8394ac0 · 8394ac0
1 parent 9ed68c8
commit 8394ac0
Show file tree

Hide file tree

Showing 21 changed files with 480 additions and 2 deletions.
diff --git a/.changeset/gold-tips-kiss.md b/.changeset/gold-tips-kiss.md
@@ -0,0 +1,15 @@
+---
+'@twilio-paste/icons': minor
+---
+
+Added the following icons:
+
+- AttachmentIcon
+- BoldIcon
+- FileIcon
+- HistoryIcon
+- ItalicIcon
+- OrderedListIcon
+- StrikethroughIcon
+- UnderlineIcon
+- UnorderedListIcon
diff --git a/packages/paste-icons/build.icon-list.js b/packages/paste-icons/build.icon-list.js
diff --git a/packages/paste-icons/json/icons.json b/packages/paste-icons/json/icons.json
diff --git a/packages/paste-icons/src/AttachmentIcon.tsx b/packages/paste-icons/src/AttachmentIcon.tsx
@@ -0,0 +1,51 @@
+/**
+ * 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} from './helpers/IconWrapper';
+import type {IconWrapperProps} from './helpers/IconWrapper';
+
+export interface AttachmentIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const AttachmentIcon: React.FC<AttachmentIconProps> = ({as, display, size, color, title, decorative}) => {
+  const titleId = `AttachmentIcon-${useUID()}`;
+
+  if (!decorative && title == null) {
+    throw new Error('[AttachmentIcon]: 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"
+        fill="none"
+        aria-labelledby={titleId}
+      >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M16.5 3h-13a.5.5 0 00-.5.5v13a.5.5 0 00.5.5h13a.5.5 0 00.5-.5v-13a.5.5 0 00-.5-.5zm-13-1A1.5 1.5 0 002 3.5v13A1.5 1.5 0 003.5 18h13a1.5 1.5 0 001.5-1.5v-13A1.5 1.5 0 0016.5 2h-13z"
+        />
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.099 10.109a1.968 1.968 0 002.782 2.783l4-4.001a.5.5 0 11.708.707l-4 4A2.968 2.968 0 116.39 9.401l3.281-3.28a2.145 2.145 0 113.034 3.033l-3.3 3.301a1.323 1.323 0 01-1.87-1.87l.006-.006 3.296-3.297a.5.5 0 11.708.707l-3.293 3.294a.323.323 0 00.456.456l3.298-3.3a1.145 1.145 0 10-1.619-1.62l-.006.006L7.1 10.11z"
+        />
+      </svg>
+    </IconWrapper>
+  );
+};
+
+AttachmentIcon.displayName = 'AttachmentIcon';
+export {AttachmentIcon};
diff --git a/packages/paste-icons/src/BoldIcon.tsx b/packages/paste-icons/src/BoldIcon.tsx
@@ -0,0 +1,43 @@
+/**
+ * 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} from './helpers/IconWrapper';
+import type {IconWrapperProps} from './helpers/IconWrapper';
+
+export interface BoldIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const BoldIcon: React.FC<BoldIconProps> = ({as, display, size, color, title, decorative}) => {
+  const titleId = `BoldIcon-${useUID()}`;
+
+  if (!decorative && title == null) {
+    throw new Error('[BoldIcon]: 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"
+        fill="none"
+        aria-labelledby={titleId}
+      >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <path
+          fill="currentColor"
+          d="M13.298 9.629a.244.244 0 01-.015-.327c.415-.5.688-1.12.784-1.784a3.728 3.728 0 00-.241-1.957 3.421 3.421 0 00-1.19-1.5 3.058 3.058 0 00-1.755-.561H7.22a1.66 1.66 0 00-1.217.544c-.323.348-.504.82-.504 1.313v9.286c0 .492.181.965.504 1.313s.761.544 1.218.544h3.616c.74.001 1.462-.24 2.072-.69a3.91 3.91 0 001.345-1.835 4.238 4.238 0 00.145-2.334 4.017 4.017 0 00-1.105-2.012h.003zm-6.076-4.04c0-.061.022-.12.063-.164a.208.208 0 01.152-.068h3.444c.4 0 .782.171 1.065.476.283.305.441.718.441 1.15 0 .43-.159.843-.441 1.148a1.453 1.453 0 01-1.065.476H7.437a.208.208 0 01-.152-.068.242.242 0 01-.063-.164V5.589zm3.619 9.054H7.437a.208.208 0 01-.152-.068.242.242 0 01-.063-.164v-3.715c0-.061.022-.12.063-.164a.207.207 0 01.152-.068h3.404c.514 0 1.007.22 1.37.612.363.392.567.923.567 1.478 0 .554-.204 1.085-.567 1.477a1.868 1.868 0 01-1.37.612z"
+        />
+      </svg>
+    </IconWrapper>
+  );
+};
+
+BoldIcon.displayName = 'BoldIcon';
+export {BoldIcon};
diff --git a/packages/paste-icons/src/FileIcon.tsx b/packages/paste-icons/src/FileIcon.tsx
@@ -0,0 +1,49 @@
+/**
+ * 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} from './helpers/IconWrapper';
+import type {IconWrapperProps} from './helpers/IconWrapper';
+
+export interface FileIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const FileIcon: React.FC<FileIconProps> = ({as, display, size, color, title, decorative}) => {
+  const titleId = `FileIcon-${useUID()}`;
+
+  if (!decorative && title == null) {
+    throw new Error('[FileIcon]: 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"
+        fill="none"
+        aria-labelledby={titleId}
+      >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <path
+          fill="currentColor"
+          d="M5.5 6a.5.5 0 000 1h6a.5.5 0 000-1h-6zM5 10a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9A.5.5 0 015 10zM5.5 13a.5.5 0 000 1h8a.5.5 0 000-1h-8z"
+        />
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 3.5A1.5 1.5 0 013.5 2h13A1.5 1.5 0 0118 3.5v13a1.5 1.5 0 01-1.5 1.5h-13A1.5 1.5 0 012 16.5v-13zM3.5 3h13a.5.5 0 01.5.5v13a.5.5 0 01-.5.5h-13a.5.5 0 01-.5-.5v-13a.5.5 0 01.5-.5z"
+        />
+      </svg>
+    </IconWrapper>
+  );
+};
+
+FileIcon.displayName = 'FileIcon';
+export {FileIcon};
diff --git a/packages/paste-icons/src/HistoryIcon.tsx b/packages/paste-icons/src/HistoryIcon.tsx
@@ -0,0 +1,47 @@
+/**
+ * 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} from './helpers/IconWrapper';
+import type {IconWrapperProps} from './helpers/IconWrapper';
+
+export interface HistoryIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const HistoryIcon: React.FC<HistoryIconProps> = ({as, display, size, color, title, decorative}) => {
+  const titleId = `HistoryIcon-${useUID()}`;
+
+  if (!decorative && title == null) {
+    throw new Error('[HistoryIcon]: 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"
+        fill="none"
+        aria-labelledby={titleId}
+      >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <path
+          fill="currentColor"
+          d="M8.197 2.641a7.966 7.966 0 113.049 15.326.625.625 0 110-1.25 6.716 6.716 0 10-6.71-6.994l1.575-1.65a.625.625 0 01.904.864l-2.837 2.97a.625.625 0 01-.987-.108L1.027 8.224a.625.625 0 111.07-.648l1.196 1.976a7.966 7.966 0 014.904-6.91z"
+        />
+        <path
+          fill="currentColor"
+          d="M11.712 6.5a.625.625 0 00-1.25 0v3.358c0 .308.16.593.425.75l2.378 1.428a.625.625 0 00.643-1.072l-2.196-1.318V6.5z"
+        />
+      </svg>
+    </IconWrapper>
+  );
+};
+
+HistoryIcon.displayName = 'HistoryIcon';
+export {HistoryIcon};
diff --git a/packages/paste-icons/src/ItalicIcon.tsx b/packages/paste-icons/src/ItalicIcon.tsx
@@ -0,0 +1,51 @@
+/**
+ * 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} from './helpers/IconWrapper';
+import type {IconWrapperProps} from './helpers/IconWrapper';
+
+export interface ItalicIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const ItalicIcon: React.FC<ItalicIconProps> = ({as, display, size, color, title, decorative}) => {
+  const titleId = `ItalicIcon-${useUID()}`;
+
+  if (!decorative && title == null) {
+    throw new Error('[ItalicIcon]: 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"
+        fill="none"
+        aria-labelledby={titleId}
+      >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M13.16 4.069a.625.625 0 01.271.84l-5.5 10.75a.625.625 0 01-1.112-.569l5.5-10.75a.625.625 0 01.84-.271z"
+        />
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4 15.375c0-.345.28-.625.625-.625h5.75a.625.625 0 110 1.25h-5.75A.625.625 0 014 15.375zM9 4.625C9 4.28 9.28 4 9.625 4h5.75a.625.625 0 110 1.25h-5.75A.625.625 0 019 4.625z"
+        />
+      </svg>
+    </IconWrapper>
+  );
+};
+
+ItalicIcon.displayName = 'ItalicIcon';
+export {ItalicIcon};
diff --git a/packages/paste-icons/src/OrderedListIcon.tsx b/packages/paste-icons/src/OrderedListIcon.tsx
@@ -0,0 +1,43 @@
+/**
+ * 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} from './helpers/IconWrapper';
+import type {IconWrapperProps} from './helpers/IconWrapper';
+
+export interface OrderedListIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const OrderedListIcon: React.FC<OrderedListIconProps> = ({as, display, size, color, title, decorative}) => {
+  const titleId = `OrderedListIcon-${useUID()}`;
+
+  if (!decorative && title == null) {
+    throw new Error('[OrderedListIcon]: 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"
+        fill="none"
+        aria-labelledby={titleId}
+      >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <path
+          fill="currentColor"
+          d="M5.625 4.63a.625.625 0 00-.993-.505l-1.37 1a.625.625 0 10.736 1.01l.377-.275v2.52a.625.625 0 101.25 0V4.63zM7.374 5.25c0-.345.28-.625.625-.625h8.376a.625.625 0 110 1.25H7.999a.625.625 0 01-.625-.625zM7.374 10c0-.345.28-.625.625-.625h8.376a.625.625 0 110 1.25H7.999A.625.625 0 017.374 10zM7.999 14.125a.625.625 0 100 1.25h8.376a.625.625 0 100-1.25H7.999zM4.668 12.255a.398.398 0 00-.285.124.463.463 0 00-.128.322.625.625 0 11-1.25 0c0-.444.17-.873.48-1.192.31-.32.736-.504 1.183-.504.448 0 .873.183 1.183.504.31.32.48.748.48 1.192 0 .231-.026.452-.117.682a2.426 2.426 0 01-.36.595c-.12.156-.416.467-.718.777h.744a.625.625 0 110 1.25H3.63a.625.625 0 01-.439-1.07l.063-.062a95.09 95.09 0 00.698-.697c.415-.419.812-.831.915-.964a1.25 1.25 0 00.184-.286.575.575 0 00.03-.225.463.463 0 00-.127-.322.398.398 0 00-.286-.124z"
+        />
+      </svg>
+    </IconWrapper>
+  );
+};
+
+OrderedListIcon.displayName = 'OrderedListIcon';
+export {OrderedListIcon};