Skip to content

Commit c128d63

Browse files
krisantrobuskrisantrobus
authored
feat(icons): add icons for upcoming release (#4197)
* chore(icons): add icons for upcoming release * chore(icons): add changeset
1 parent 6f49ba7 commit c128d63

File tree

12 files changed

+234
-2
lines changed

12 files changed

+234
-2
lines changed

‎.changeset/nervous-lies-drive.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 4 new icons FeedbackIcon, TextIcon, CarouselIcon and CardIcon

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ Array [
3535
"CallIncomingIcon",
3636
"CallOutgoingIcon",
3737
"CallTransferIcon",
38+
"CardIcon",
39+
"CarouselIcon",
3840
"CartIcon",
3941
"ChatIcon",
4042
"CheckboxCheckIcon",
@@ -100,6 +102,7 @@ Array [
100102
"ExportIcon",
101103
"FaxCapableIcon",
102104
"FeedIcon",
105+
"FeedbackIcon",
103106
"FileAudioIcon",
104107
"FileIcon",
105108
"FileImageIcon",
@@ -298,6 +301,7 @@ Array [
298301
"TextFormatClearIcon",
299302
"TextFormatIcon",
300303
"TextHighlightIcon",
304+
"TextIcon",
301305
"ThemeIcon",
302306
"ThumbsDownIcon",
303307
"ThumbsUpIcon",

‎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/CardIcon.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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 CardIconProps extends IconWrapperProps {
11+
title?: string;
12+
decorative: boolean;
13+
}
14+
15+
const CardIcon = React.forwardRef<HTMLElement, CardIconProps>(
16+
({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
17+
const titleId = `CardIcon-${useUID()}`;
18+
19+
if (!decorative && title == null) {
20+
throw new Error("[CardIcon]: 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+
fill="none"
29+
xmlns="http://www.w3.org/2000/svg"
30+
width="100%"
31+
height="100%"
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+
clipRule="evenodd"
40+
d="M3 3.505V16.5c0 .163.04.251.072.3a.38.38 0 00.152.128.732.732 0 00.28.072H16.5c.163 0 .251-.04.3-.072a.38.38 0 00.128-.152.731.731 0 00.071-.269l.001-.012V3.5a.524.524 0 00-.072-.3.378.378 0 00-.152-.128.73.73 0 00-.269-.071L16.495 3H3.5a.524.524 0 00-.3.072.38.38 0 00-.128.152.73.73 0 00-.071.269L3 3.505zM16.5 2.5V2h-13c-.337 0-.624.086-.855.24a1.377 1.377 0 00-.467.536A1.728 1.728 0 002 3.472V3.5l.5.001H2v13c0 .337.086.624.24.855.153.229.352.375.536.467a1.729 1.729 0 00.696.178H3.5l.001-.5v.5h13c.337 0 .624-.086.855-.24.229-.153.375-.352.467-.536a1.73 1.73 0 00.178-.696V16.5l-.5-.001h.5v-13c0-.337-.086-.624-.24-.855a1.378 1.378 0 00-.536-.467A1.73 1.73 0 0016.528 2H16.5l-.001.5z"
41+
/>
42+
<path
43+
fill="currentColor"
44+
fillRule="evenodd"
45+
clipRule="evenodd"
46+
d="M7 6.528v2.944a.255.255 0 00.122.028h5.82a.255.255 0 00.121-.028V6.528a.255.255 0 00-.122-.028H7.122A.255.255 0 007 6.528zm-.622-.786c.208-.158.472-.242.744-.242h5.82c.271 0 .536.084.743.242a.926.926 0 01.378.734v3.048c0 .32-.17.575-.378.734a1.226 1.226 0 01-.744.242H7.122c-.272 0-.536-.084-.744-.242A.926.926 0 016 9.524V6.476c0-.32.17-.575.378-.734zM5 12.5a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9a.5.5 0 01-.5-.5zm0 2a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9a.5.5 0 01-.5-.5z"
47+
/>
48+
</svg>
49+
</IconWrapper>
50+
);
51+
},
52+
);
53+
54+
CardIcon.displayName = "CardIcon";
55+
export { CardIcon };

‎packages/paste-icons/src/CarouselIcon.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 CarouselIconProps extends IconWrapperProps {
11+
title?: string;
12+
decorative: boolean;
13+
}
14+
15+
const CarouselIcon = React.forwardRef<HTMLElement, CarouselIconProps>(
16+
({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
17+
const titleId = `CarouselIcon-${useUID()}`;
18+
19+
if (!decorative && title == null) {
20+
throw new Error("[CarouselIcon]: 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+
fill="none"
29+
xmlns="http://www.w3.org/2000/svg"
30+
width="100%"
31+
height="100%"
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+
d="M7 17a1 1 0 11-2 0 1 1 0 012 0zm4 0a1 1 0 11-2 0 1 1 0 012 0zm4 0a1 1 0 11-2 0 1 1 0 012 0zm2-12.5a.5.5 0 011 0v7a.5.5 0 01-1 0v-7zm-15 0a.5.5 0 011 0v7a.5.5 0 01-1 0v-7z"
39+
/>
40+
<path
41+
fill="currentColor"
42+
fillRule="evenodd"
43+
clipRule="evenodd"
44+
d="M13 4H7a1 1 0 00-1 1v6a1 1 0 001 1h6a1 1 0 001-1V5a1 1 0 00-1-1zM7 3a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2V5a2 2 0 00-2-2H7z"
45+
/>
46+
</svg>
47+
</IconWrapper>
48+
);
49+
},
50+
);
51+
52+
CarouselIcon.displayName = "CarouselIcon";
53+
export { CarouselIcon };

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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 FeedbackIconProps extends IconWrapperProps {
11+
title?: string;
12+
decorative: boolean;
13+
}
14+
15+
const FeedbackIcon = React.forwardRef<HTMLElement, FeedbackIconProps>(
16+
({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
17+
const titleId = `FeedbackIcon-${useUID()}`;
18+
19+
if (!decorative && title == null) {
20+
throw new Error("[FeedbackIcon]: 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+
fill="none"
29+
xmlns="http://www.w3.org/2000/svg"
30+
width="100%"
31+
height="100%"
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+
clipRule="evenodd"
40+
d="M5.433 4A.433.433 0 005 4.433v12.13a.433.433 0 00.433.433h3.732a.5.5 0 010 1H5.433A1.433 1.433 0 014 16.563V4.433A1.433 1.433 0 015.433 3h6.613c.38 0 .744.152 1.013.42l3.653 3.654a1.459 1.459 0 01.417 1.127.5.5 0 11-.998-.07.457.457 0 00-.13-.354l-3.65-3.65A.434.434 0 0012.045 4H5.433z"
41+
/>
42+
<path
43+
fill="currentColor"
44+
fillRule="evenodd"
45+
clipRule="evenodd"
46+
d="M11.965 3a.5.5 0 01.5.5v3.732a.433.433 0 00.433.433h3.732a.5.5 0 010 1h-3.732a1.433 1.433 0 01-1.433-1.433V3.5a.5.5 0 01.5-.5zM9.42 8.614a.5.5 0 01.093.701L8.16 11.084a.987.987 0 01-.694.379l-.017.001a.98.98 0 01-.738-.28l-.009-.009-.697-.722a.5.5 0 11.72-.694l.664.688 1.328-1.74a.5.5 0 01.701-.093zm0 4.199a.5.5 0 01.093.7l-1.352 1.77a.985.985 0 01-.694.379H7.45a.978.978 0 01-.738-.279l-.009-.009-.697-.722a.5.5 0 01.72-.694l.664.687 1.328-1.738a.5.5 0 01.701-.094zm1.112-1.848a.5.5 0 01.5-.5h2.332a.5.5 0 110 1h-2.332a.5.5 0 01-.5-.5zm6.645-.437a.812.812 0 00-.577.24l-.002.003-4.64 4.64-.289 1.448 1.449-.29 4.64-4.641a.813.813 0 000-1.155l-.003-.004a.814.814 0 00-.578-.241zm-.698-.86a1.812 1.812 0 011.985.396 1.814 1.814 0 010 2.574h-.002l-4.744 4.745a.5.5 0 01-.256.137l-2.332.467a.5.5 0 01-.589-.589l.467-2.332a.5.5 0 01.137-.256l4.744-4.744.001-.001c.168-.17.369-.305.59-.397z"
47+
/>
48+
</svg>
49+
</IconWrapper>
50+
);
51+
},
52+
);
53+
54+
FeedbackIcon.displayName = "FeedbackIcon";
55+
export { FeedbackIcon };

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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 TextIconProps extends IconWrapperProps {
11+
title?: string;
12+
decorative: boolean;
13+
}
14+
15+
const TextIcon = React.forwardRef<HTMLElement, TextIconProps>(
16+
({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
17+
const titleId = `TextIcon-${useUID()}`;
18+
19+
if (!decorative && title == null) {
20+
throw new Error("[TextIcon]: 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+
fill="none"
29+
xmlns="http://www.w3.org/2000/svg"
30+
width="100%"
31+
height="100%"
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+
clipRule="evenodd"
40+
d="M6.84 3h6.325c.648 0 1.183 0 1.607.057.447.06.843.192 1.162.51.319.32.45.718.51 1.164.056.423.056.957.056 1.6v.727a.5.5 0 01-1 0v-.683c0-.692 0-1.16-.048-1.511-.045-.336-.124-.487-.226-.59-.102-.102-.253-.18-.588-.226C14.29 4.001 13.822 4 13.13 4H10.5v12.438a.5.5 0 01-1 0V4H6.875c-.692 0-1.16.001-1.51.048-.337.045-.488.124-.59.227-.103.102-.182.253-.227.59-.047.35-.048.818-.048 1.51v.683a.5.5 0 11-1 0V6.34c0-.648 0-1.184.057-1.609.06-.447.192-.845.51-1.164m0 0c.32-.318.717-.45 1.164-.51C5.656 3 6.192 3 6.84 3"
41+
/>
42+
<path
43+
fill="currentColor"
44+
fillRule="evenodd"
45+
clipRule="evenodd"
46+
d="M5.5 16.5A.5.5 0 016 16h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z"
47+
/>
48+
</svg>
49+
</IconWrapper>
50+
);
51+
},
52+
);
53+
54+
TextIcon.displayName = "TextIcon";
55+
export { TextIcon };

‎packages/paste-icons/svg/Card.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎packages/paste-icons/svg/Carousel.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)