-
Notifications
You must be signed in to change notification settings - Fork 116
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(icons): add icons for upcoming release (#4197)
* chore(icons): add icons for upcoming release * chore(icons): add changeset
- Loading branch information
1 parent
6f49ba7
commit c128d63
Showing
12 changed files
with
234 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| "@twilio-paste/core": minor | ||
| "@twilio-paste/icons": minor | ||
| --- | ||
|
|
||
| [Icons] added 4 new icons FeedbackIcon, TextIcon, CarouselIcon and CardIcon |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { useUID } from "@twilio-paste/uid-library"; | ||
| /** | ||
| * This file was automatically generated with @twilio-labs/svg-to-react | ||
| */ | ||
| import * as React from "react"; | ||
|
|
||
| import { IconWrapper } from "./helpers/IconWrapper"; | ||
| import type { IconWrapperProps } from "./helpers/IconWrapper"; | ||
|
|
||
| export interface CardIconProps extends IconWrapperProps { | ||
| title?: string; | ||
| decorative: boolean; | ||
| } | ||
|
|
||
| const CardIcon = React.forwardRef<HTMLElement, CardIconProps>( | ||
| ({ as, display, element = "ICON", size, color, title, decorative }, ref) => { | ||
| const titleId = `CardIcon-${useUID()}`; | ||
|
|
||
| if (!decorative && title == null) { | ||
| throw new Error("[CardIcon]: Missing a title for non-decorative icon."); | ||
| } | ||
|
|
||
| return ( | ||
| <IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}> | ||
| <svg | ||
| role="img" | ||
| aria-hidden={decorative} | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="100%" | ||
| height="100%" | ||
| viewBox="0 0 20 20" | ||
| aria-labelledby={titleId} | ||
| > | ||
| {title ? <title id={titleId}>{title}</title> : null} | ||
| <path | ||
| fill="currentColor" | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| 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" | ||
| /> | ||
| <path | ||
| fill="currentColor" | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| 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" | ||
| /> | ||
| </svg> | ||
| </IconWrapper> | ||
| ); | ||
| }, | ||
| ); | ||
|
|
||
| CardIcon.displayName = "CardIcon"; | ||
| export { CardIcon }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { useUID } from "@twilio-paste/uid-library"; | ||
| /** | ||
| * This file was automatically generated with @twilio-labs/svg-to-react | ||
| */ | ||
| import * as React from "react"; | ||
|
|
||
| import { IconWrapper } from "./helpers/IconWrapper"; | ||
| import type { IconWrapperProps } from "./helpers/IconWrapper"; | ||
|
|
||
| export interface CarouselIconProps extends IconWrapperProps { | ||
| title?: string; | ||
| decorative: boolean; | ||
| } | ||
|
|
||
| const CarouselIcon = React.forwardRef<HTMLElement, CarouselIconProps>( | ||
| ({ as, display, element = "ICON", size, color, title, decorative }, ref) => { | ||
| const titleId = `CarouselIcon-${useUID()}`; | ||
|
|
||
| if (!decorative && title == null) { | ||
| throw new Error("[CarouselIcon]: Missing a title for non-decorative icon."); | ||
| } | ||
|
|
||
| return ( | ||
| <IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}> | ||
| <svg | ||
| role="img" | ||
| aria-hidden={decorative} | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="100%" | ||
| height="100%" | ||
| viewBox="0 0 20 20" | ||
| aria-labelledby={titleId} | ||
| > | ||
| {title ? <title id={titleId}>{title}</title> : null} | ||
| <path | ||
| fill="currentColor" | ||
| 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" | ||
| /> | ||
| <path | ||
| fill="currentColor" | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| 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" | ||
| /> | ||
| </svg> | ||
| </IconWrapper> | ||
| ); | ||
| }, | ||
| ); | ||
|
|
||
| CarouselIcon.displayName = "CarouselIcon"; | ||
| export { CarouselIcon }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { useUID } from "@twilio-paste/uid-library"; | ||
| /** | ||
| * This file was automatically generated with @twilio-labs/svg-to-react | ||
| */ | ||
| import * as React from "react"; | ||
|
|
||
| import { IconWrapper } from "./helpers/IconWrapper"; | ||
| import type { IconWrapperProps } from "./helpers/IconWrapper"; | ||
|
|
||
| export interface FeedbackIconProps extends IconWrapperProps { | ||
| title?: string; | ||
| decorative: boolean; | ||
| } | ||
|
|
||
| const FeedbackIcon = React.forwardRef<HTMLElement, FeedbackIconProps>( | ||
| ({ as, display, element = "ICON", size, color, title, decorative }, ref) => { | ||
| const titleId = `FeedbackIcon-${useUID()}`; | ||
|
|
||
| if (!decorative && title == null) { | ||
| throw new Error("[FeedbackIcon]: Missing a title for non-decorative icon."); | ||
| } | ||
|
|
||
| return ( | ||
| <IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}> | ||
| <svg | ||
| role="img" | ||
| aria-hidden={decorative} | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="100%" | ||
| height="100%" | ||
| viewBox="0 0 20 20" | ||
| aria-labelledby={titleId} | ||
| > | ||
| {title ? <title id={titleId}>{title}</title> : null} | ||
| <path | ||
| fill="currentColor" | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| 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" | ||
| /> | ||
| <path | ||
| fill="currentColor" | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| 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" | ||
| /> | ||
| </svg> | ||
| </IconWrapper> | ||
| ); | ||
| }, | ||
| ); | ||
|
|
||
| FeedbackIcon.displayName = "FeedbackIcon"; | ||
| export { FeedbackIcon }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { useUID } from "@twilio-paste/uid-library"; | ||
| /** | ||
| * This file was automatically generated with @twilio-labs/svg-to-react | ||
| */ | ||
| import * as React from "react"; | ||
|
|
||
| import { IconWrapper } from "./helpers/IconWrapper"; | ||
| import type { IconWrapperProps } from "./helpers/IconWrapper"; | ||
|
|
||
| export interface TextIconProps extends IconWrapperProps { | ||
| title?: string; | ||
| decorative: boolean; | ||
| } | ||
|
|
||
| const TextIcon = React.forwardRef<HTMLElement, TextIconProps>( | ||
| ({ as, display, element = "ICON", size, color, title, decorative }, ref) => { | ||
| const titleId = `TextIcon-${useUID()}`; | ||
|
|
||
| if (!decorative && title == null) { | ||
| throw new Error("[TextIcon]: Missing a title for non-decorative icon."); | ||
| } | ||
|
|
||
| return ( | ||
| <IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}> | ||
| <svg | ||
| role="img" | ||
| aria-hidden={decorative} | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="100%" | ||
| height="100%" | ||
| viewBox="0 0 20 20" | ||
| aria-labelledby={titleId} | ||
| > | ||
| {title ? <title id={titleId}>{title}</title> : null} | ||
| <path | ||
| fill="currentColor" | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| 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" | ||
| /> | ||
| <path | ||
| fill="currentColor" | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| d="M5.5 16.5A.5.5 0 016 16h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" | ||
| /> | ||
| </svg> | ||
| </IconWrapper> | ||
| ); | ||
| }, | ||
| ); | ||
|
|
||
| TextIcon.displayName = "TextIcon"; | ||
| export { TextIcon }; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.