Skip to content

Commit b5e6d3f

Browse files
krisantrobuskrisantrobus
authored
Chore: Icons (#3962)
* chore(icons): updated initial 3 icons * chore(icons): updated package after build * feat(icons): added 4 new icons * feat(icons): added changelog * chore(icons): fix lint issues * chore(icons): update tests snapshot * chore(incons): revert small cahnge test for vercel
1 parent 26c279e commit b5e6d3f

19 files changed

+352
-12
lines changed

‎.changeset/tender-lobsters-cough.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/core": minor
3+
"@twilio-paste/icons": minor
4+
---
5+
6+
[Icons] Added 5 new icons: AuthenticationIcon, TemplateMessageIcon, TriggerIcon, ProductUnifiedProfilesIcon and UnstarIcon. Also updated 2 icons: ProductSupportIcon and SupportIcon

‎packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ Array [
1717
"ArtificialIntelligenceIcon",
1818
"AttachIcon",
1919
"AttachmentIcon",
20+
"AuthenticationIcon",
2021
"AutomaticUpdatesIcon",
2122
"AvailableIcon",
2223
"BoldIcon",
@@ -241,6 +242,7 @@ Array [
241242
"ProductTwiMLBinsIcon",
242243
"ProductTwilioOrgIcon",
243244
"ProductUSSDIcon",
245+
"ProductUnifiedProfilesIcon",
244246
"ProductUnifyIcon",
245247
"ProductUsageIcon",
246248
"ProductVerifyIcon",
@@ -284,6 +286,7 @@ Array [
284286
"SupportIcon",
285287
"SystemStatusIcon",
286288
"TaskIcon",
289+
"TemplateMessageIcon",
287290
"TextAlignCenterIcon",
288291
"TextAlignJustifyIcon",
289292
"TextAlignLeftIcon",
@@ -302,13 +305,15 @@ Array [
302305
"TranslationIcon",
303306
"TrendDownIcon",
304307
"TrendUpIcon",
308+
"TriggerIcon",
305309
"UnarchiveIcon",
306310
"UnderlineIcon",
307311
"UndoIcon",
308312
"UnlockIcon",
309313
"UnorderedListIcon",
310314
"UnpinIcon",
311315
"UnsortedIcon",
316+
"UnstarIcon",
312317
"UnsubscribeIcon",
313318
"UploadIcon",
314319
"UploadToCloudIcon",

‎packages/paste-icons/build.icon-list.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/paste-icons/json/icons.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/paste-icons/src/AuthenticationIcon.tsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { useUID } from "@twilio-paste/uid-library";
2+
/**
3+
* This file was automatically generated with @twilio-labs/svg-to-react
4+
*/
5+
import * as React from "react";
6+
7+
import { IconWrapper } from "./helpers/IconWrapper";
8+
import type { IconWrapperProps } from "./helpers/IconWrapper";
9+
10+
export interface AuthenticationIconProps extends IconWrapperProps {
11+
title?: string;
12+
decorative: boolean;
13+
}
14+
15+
const AuthenticationIcon = React.forwardRef<HTMLElement, AuthenticationIconProps>(
16+
({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
17+
const titleId = `AuthenticationIcon-${useUID()}`;
18+
19+
if (!decorative && title == null) {
20+
throw new Error("[AuthenticationIcon]: Missing a title for non-decorative icon.");
21+
}
22+
23+
return (
24+
<IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}>
25+
<svg
26+
role="img"
27+
aria-hidden={decorative}
28+
xmlns="http://www.w3.org/2000/svg"
29+
width="100%"
30+
height="100%"
31+
fill="none"
32+
viewBox="0 0 20 20"
33+
aria-labelledby={titleId}
34+
>
35+
{title ? <title id={titleId}>{title}</title> : null}
36+
<path
37+
d="M13.106 7.281a.5.5 0 1 0-.8-.6l-2.64 3.52-1.583-1.583a.5.5 0 1 0-.707.707l1.585 1.585a.997.997 0 0 0 1.503-.107l2.642-3.522Z"
38+
fill="currentColor"
39+
/>
40+
<path
41+
fillRule="evenodd"
42+
clipRule="evenodd"
43+
d="M4.429 2.5A1.429 1.429 0 0 0 3 3.929v5.573c0 .868.324 1.724.794 2.513.472.792 1.109 1.549 1.78 2.228C6.919 15.602 8.45 16.7 9.23 17.204a1.414 1.414 0 0 0 1.544 0c.78-.504 2.312-1.602 3.656-2.96.672-.68 1.31-1.437 1.78-2.23.47-.788.795-1.644.795-2.512V3.93a1.429 1.429 0 0 0-1.43-1.429H4.43Zm-.303 1.126c.08-.08.19-.126.303-.126h11.147a.429.429 0 0 1 .429.429v5.573c0 .623-.236 1.3-.654 2.001-.416.7-.994 1.392-1.632 2.037-1.277 1.291-2.746 2.345-3.489 2.825l-.001.001a.415.415 0 0 1-.453 0h-.002c-.742-.481-2.211-1.535-3.488-2.826-.638-.645-1.217-1.338-1.633-2.037-.417-.702-.653-1.378-.653-2V3.928c0-.114.045-.223.126-.303Z"
44+
fill="currentColor"
45+
/>
46+
</svg>
47+
</IconWrapper>
48+
);
49+
},
50+
);
51+
52+
AuthenticationIcon.displayName = "AuthenticationIcon";
53+
export { AuthenticationIcon };

‎packages/paste-icons/src/ProductSupportIcon.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const ProductSupportIcon = React.forwardRef<HTMLElement, ProductSupportIconProps
3636
<path
3737
fill="currentColor"
3838
fillRule="evenodd"
39-
d="M1.4 10a8.6 8.6 0 1117.2 0 8.6 8.6 0 01-17.2 0zM10 2.6a7.4 7.4 0 100 14.8 7.4 7.4 0 000-14.8zm.23 3.713a2.01 2.01 0 00-2.239 2v.6l-1.2.002v-.6a3.21 3.21 0 113.903 3.13l-.013.002a.1.1 0 00-.081.096v.957H9.4v-.97a1.301 1.301 0 011.04-1.258 2.01 2.01 0 00-.21-3.959zm-1.003 8.139a.774.774 0 111.548 0 .774.774 0 01-1.548 0z"
39+
d="M1.5 10a8.5 8.5 0 1 1 17 0 8.5 8.5 0 0 1-17 0ZM10 2.686a7.314 7.314 0 1 0 0 14.628 7.314 7.314 0 0 0 0-14.628Zm.227 3.67a1.987 1.987 0 0 0-2.213 1.977l.001.593-1.186.002v-.594a3.173 3.173 0 1 1 3.857 3.094l-.013.003a.1.1 0 0 0-.08.094v.946H9.407v-.96a1.286 1.286 0 0 1 1.028-1.242 1.986 1.986 0 0 0-.208-3.913Zm-.99 8.044a.765.765 0 1 1 1.529 0 .765.765 0 0 1-1.53 0Z"
4040
clipRule="evenodd"
4141
/>
4242
</svg>

‎packages/paste-icons/src/ProductUnifiedProfilesIcon.tsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { useUID } from "@twilio-paste/uid-library";
2+
/**
3+
* This file was automatically generated with @twilio-labs/svg-to-react
4+
*/
5+
import * as React from "react";
6+
7+
import { IconWrapper } from "./helpers/IconWrapper";
8+
import type { IconWrapperProps } from "./helpers/IconWrapper";
9+
10+
export interface ProductUnifiedProfilesIconProps extends IconWrapperProps {
11+
title?: string;
12+
decorative: boolean;
13+
}
14+
15+
const ProductUnifiedProfilesIcon = React.forwardRef<HTMLElement, ProductUnifiedProfilesIconProps>(
16+
({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
17+
const titleId = `ProductUnifiedProfilesIcon-${useUID()}`;
18+
19+
if (!decorative && title == null) {
20+
throw new Error("[ProductUnifiedProfilesIcon]: Missing a title for non-decorative icon.");
21+
}
22+
23+
return (
24+
<IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}>
25+
<svg
26+
role="img"
27+
aria-hidden={decorative}
28+
xmlns="http://www.w3.org/2000/svg"
29+
width="100%"
30+
height="100%"
31+
fill="none"
32+
viewBox="0 0 20 20"
33+
aria-labelledby={titleId}
34+
>
35+
{title ? <title id={titleId}>{title}</title> : null}
36+
<path
37+
fillRule="evenodd"
38+
clipRule="evenodd"
39+
d="M8.513 9.297a2.578 2.578 0 0 1-1.251-2.202c0-1.428 1.18-2.588 2.631-2.588 1.451 0 2.631 1.16 2.631 2.588a2.58 2.58 0 0 1-1.21 2.177c1.728.563 2.98 2.168 2.98 4.054 0 .313-.26.569-.579.569H6.186a.575.575 0 0 1-.578-.569c0-1.859 1.215-3.444 2.905-4.03Zm-.095-2.202c0-.796.66-1.45 1.475-1.45.81 0 1.475.654 1.475 1.45 0 .796-.665 1.45-1.475 1.45s-1.475-.654-1.475-1.45Zm1.539 3.098c1.56 0 2.862 1.11 3.134 2.565H6.822c.272-1.456 1.573-2.565 3.135-2.565Z"
40+
fill="currentColor"
41+
/>
42+
<path
43+
d="M2.076 12.001c.914 3.499 4.149 5.993 7.875 5.993V18c3.66 0 6.887-2.428 7.847-5.902a.564.564 0 0 0-.405-.7.579.579 0 0 0-.711.399c-.821 2.98-3.585 5.06-6.731 5.06-3.097 0-5.802-2.006-6.68-4.866a.584.584 0 0 0 .4-.285.552.552 0 0 0-.017-.58l-.544-.83c-.214-.33-.763-.33-.977 0l-.544.83a.565.565 0 0 0-.017.58c.103.18.292.294.504.295Z"
44+
clipRule="evenodd"
45+
/>
46+
<path
47+
d="M9.95 3.137c3.173 0 5.947 2.141 6.746 5.095a.584.584 0 0 0-.367.278.552.552 0 0 0 .017.58l.544.83a.572.572 0 0 0 .486.262h.005a.572.572 0 0 0 .486-.262l.544-.83a.564.564 0 0 0 .017-.58.583.583 0 0 0-.509-.295h-.037C17.048 4.632 13.748 2 9.951 2 6.14 2 2.798 4.655 2 8.317a.58.58 0 0 0 1.133.239c.683-3.139 3.377-5.419 6.818-5.419Z"
48+
fill="currentColor"
49+
/>
50+
<path
51+
fillRule="evenodd"
52+
clipRule="evenodd"
53+
d="M8.513 9.297a2.578 2.578 0 0 1-1.251-2.202c0-1.428 1.18-2.588 2.631-2.588 1.451 0 2.631 1.16 2.631 2.588a2.58 2.58 0 0 1-1.21 2.177c1.728.563 2.98 2.168 2.98 4.054 0 .313-.26.569-.579.569H6.186a.575.575 0 0 1-.578-.569c0-1.859 1.215-3.444 2.905-4.03Zm-.095-2.202c0-.796.66-1.45 1.475-1.45.81 0 1.475.654 1.475 1.45 0 .796-.665 1.45-1.475 1.45s-1.475-.654-1.475-1.45Zm1.539 3.098c1.56 0 2.862 1.11 3.134 2.565H6.822c.272-1.456 1.573-2.565 3.135-2.565Z"
54+
fill="currentColor"
55+
/>
56+
<path
57+
d="M2.076 12.001c.914 3.499 4.149 5.993 7.875 5.993V18c3.66 0 6.887-2.428 7.847-5.902a.564.564 0 0 0-.405-.7.579.579 0 0 0-.711.399c-.821 2.98-3.585 5.06-6.731 5.06-3.097 0-5.802-2.006-6.68-4.866a.584.584 0 0 0 .4-.285.552.552 0 0 0-.017-.58l-.544-.83c-.214-.33-.763-.33-.977 0l-.544.83a.565.565 0 0 0-.017.58c.103.18.292.294.504.295Z"
58+
fill="currentColor"
59+
/>
60+
</svg>
61+
</IconWrapper>
62+
);
63+
},
64+
);
65+
66+
ProductUnifiedProfilesIcon.displayName = "ProductUnifiedProfilesIcon";
67+
export { ProductUnifiedProfilesIcon };

‎packages/paste-icons/src/SupportIcon.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const SupportIcon = React.forwardRef<HTMLElement, SupportIconProps>(
3636
<path
3737
fill="currentColor"
3838
fillRule="evenodd"
39-
d="M1.4 10a8.6 8.6 0 1117.2 0 8.6 8.6 0 01-17.2 0zM10 2.6a7.4 7.4 0 100 14.8 7.4 7.4 0 000-14.8zm.23 3.713a2.01 2.01 0 00-2.239 2v.6l-1.2.002v-.6a3.21 3.21 0 113.903 3.13l-.013.002a.1.1 0 00-.081.096v.957H9.4v-.97a1.301 1.301 0 011.04-1.258 2.01 2.01 0 00-.21-3.959zm-1.003 8.139a.774.774 0 111.548 0 .774.774 0 01-1.548 0z"
39+
d="M1.5 10a8.5 8.5 0 1 1 17 0 8.5 8.5 0 0 1-17 0ZM10 2.686a7.314 7.314 0 1 0 0 14.628 7.314 7.314 0 0 0 0-14.628Zm.227 3.67a1.987 1.987 0 0 0-2.213 1.977l.001.593-1.186.002v-.594a3.173 3.173 0 1 1 3.857 3.094l-.013.003a.1.1 0 0 0-.08.094v.946H9.407v-.96a1.286 1.286 0 0 1 1.028-1.242 1.986 1.986 0 0 0-.208-3.913Zm-.99 8.044a.765.765 0 1 1 1.529 0 .765.765 0 0 1-1.53 0Z"
4040
clipRule="evenodd"
4141
/>
4242
</svg>

‎packages/paste-icons/src/TemplateMessageIcon.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { useUID } from "@twilio-paste/uid-library";
2+
/**
3+
* This file was automatically generated with @twilio-labs/svg-to-react
4+
*/
5+
import * as React from "react";
6+
7+
import { IconWrapper } from "./helpers/IconWrapper";
8+
import type { IconWrapperProps } from "./helpers/IconWrapper";
9+
10+
export interface TemplateMessageIconProps extends IconWrapperProps {
11+
title?: string;
12+
decorative: boolean;
13+
}
14+
15+
const TemplateMessageIcon = React.forwardRef<HTMLElement, TemplateMessageIconProps>(
16+
({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
17+
const titleId = `TemplateMessageIcon-${useUID()}`;
18+
19+
if (!decorative && title == null) {
20+
throw new Error("[TemplateMessageIcon]: Missing a title for non-decorative icon.");
21+
}
22+
23+
return (
24+
<IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}>
25+
<svg
26+
role="img"
27+
aria-hidden={decorative}
28+
xmlns="http://www.w3.org/2000/svg"
29+
width="100%"
30+
height="100%"
31+
fill="none"
32+
viewBox="0 0 20 20"
33+
aria-labelledby={titleId}
34+
>
35+
{title ? <title id={titleId}>{title}</title> : null}
36+
<path
37+
fill="currentColor"
38+
fillRule="evenodd"
39+
d="M3 4.518c0-.28.224-.506.5-.506h9.842c.276 0 .5.227.5.506V8.3c0 .28.224.506.5.506s.5-.227.5-.506V4.518A1.51 1.51 0 0 0 13.342 3H3.5C2.672 3 2 3.68 2 4.518v5.167a1.51 1.51 0 0 0 1.5 1.518h.579c.276 0 .5-.227.5-.506a.503.503 0 0 0-.5-.506H3.5a.503.503 0 0 1-.5-.506V4.518Zm3.158 6.392c0-.28.224-.506.5-.506h.984c.276 0 .5-.227.5-.506a.503.503 0 0 0-.5-.506h-.984c-.829 0-1.5.68-1.5 1.518v.916c0 .28.224.506.5.506s.5-.226.5-.506v-.916Zm4.437-1.518c-.276 0-.5.226-.5.506s.224.506.5.506h1.968c.276 0 .5-.227.5-.506a.503.503 0 0 0-.5-.506h-1.968Zm4.92 0c-.275 0-.5.226-.5.506s.225.506.5.506h.985c.276 0 .5.226.5.506v.873c0 .28.224.507.5.507s.5-.227.5-.506v-.874a1.51 1.51 0 0 0-1.5-1.518h-.984ZM18 14.404a.503.503 0 0 0-.5-.506c-.276 0-.5.227-.5.506v.874c0 .28-.224.506-.5.506h-.905c-.276 0-.5.226-.5.506s.224.506.5.506h.905c.828 0 1.5-.68 1.5-1.518v-.874Zm-11.842.17a.503.503 0 0 0-.5-.505c-.276 0-.5.226-.5.506v.916c0 .72.577 1.305 1.29 1.305.276 0 .5-.227.5-.506a.503.503 0 0 0-.5-.506.291.291 0 0 1-.29-.293v-.916Zm5.816 1.21c-.277 0-.5.226-.5.506s.223.506.5.506h1.974c.275 0 .5-.227.5-.506a.503.503 0 0 0-.5-.506h-1.975ZM6.053 7.1a.794.794 0 0 1-.79.8.794.794 0 0 1-.79-.8c0-.44.354-.799.79-.799.436 0 .79.358.79.8Zm2.368.8c.436 0 .79-.358.79-.8a.794.794 0 0 0-.79-.799.794.794 0 0 0-.79.8c0 .44.354.798.79.798Zm3.947-.8a.794.794 0 0 1-.79.8.794.794 0 0 1-.788-.8c0-.44.353-.799.789-.799.436 0 .79.358.79.8Zm-4.342 9.482c.276 0 .5.226.5.506v.704l.23-.14.987-.599a.497.497 0 0 1 .686.174.51.51 0 0 1-.172.694l-.987.6-.608.369a.75.75 0 0 1-1.136-.651v-1.151c0-.28.224-.506.5-.506Z"
40+
clipRule="evenodd"
41+
/>
42+
</svg>
43+
</IconWrapper>
44+
);
45+
},
46+
);
47+
48+
TemplateMessageIcon.displayName = "TemplateMessageIcon";
49+
export { TemplateMessageIcon };

‎packages/paste-icons/src/TriggerIcon.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { useUID } from "@twilio-paste/uid-library";
2+
/**
3+
* This file was automatically generated with @twilio-labs/svg-to-react
4+
*/
5+
import * as React from "react";
6+
7+
import { IconWrapper } from "./helpers/IconWrapper";
8+
import type { IconWrapperProps } from "./helpers/IconWrapper";
9+
10+
export interface TriggerIconProps extends IconWrapperProps {
11+
title?: string;
12+
decorative: boolean;
13+
}
14+
15+
const TriggerIcon = React.forwardRef<HTMLElement, TriggerIconProps>(
16+
({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
17+
const titleId = `TriggerIcon-${useUID()}`;
18+
19+
if (!decorative && title == null) {
20+
throw new Error("[TriggerIcon]: Missing a title for non-decorative icon.");
21+
}
22+
23+
return (
24+
<IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}>
25+
<svg
26+
role="img"
27+
aria-hidden={decorative}
28+
xmlns="http://www.w3.org/2000/svg"
29+
width="100%"
30+
height="100%"
31+
fill="none"
32+
viewBox="0 0 20 20"
33+
aria-labelledby={titleId}
34+
>
35+
{title ? <title id={titleId}>{title}</title> : null}
36+
<path
37+
d="M11.557 2.045a.5.5 0 0 1 .278.575l-1.327 5.358h4.231a.5.5 0 0 1 .415.78L9.067 17.78a.5.5 0 0 1-.905-.38l1.095-5.378H5a.5.5 0 0 1-.409-.788l6.35-9.022a.5.5 0 0 1 .616-.167Zm-5.594 8.977H9.87a.5.5 0 0 1 .49.6l-.716 3.514 4.155-6.158h-3.93a.5.5 0 0 1-.485-.62l.84-3.389-4.26 6.053Z"
38+
fill="currentColor"
39+
fillRule="evenodd"
40+
clipRule="evenodd"
41+
/>
42+
</svg>
43+
</IconWrapper>
44+
);
45+
},
46+
);
47+
48+
TriggerIcon.displayName = "TriggerIcon";
49+
export { TriggerIcon };

0 commit comments

Comments
 (0)