From 4b730c84dc3a636ea04570e36ad7b3bb39b24277 Mon Sep 17 00:00:00 2001 From: David Goligorsky Date: Thu, 4 Apr 2024 21:51:45 +0200 Subject: [PATCH] [Icons] Add icons for image editing (#11816) ### WHY are these changes introduced? Some icons in use on image editing features are hardcoded svgs. This change introduces Polaris icons for `Crop`, `FlipHorizontal`, `FlipVertical`, `ImageMagic`, `RotateteLeft`, `RotateRight`. This not only allows the icons to exist in Polaris for web, but also allows them to get the Mobile icon size scaling. ### WHAT is this pull request doing? ![image](https://github.com/Shopify/polaris/assets/5823560/3d5f1f41-3d8e-4950-b429-dd220088f7bd) --------- Co-authored-by: Sam Rose <11774595+sam-b-rose@users.noreply.github.com> --- .changeset/hip-windows-exercise.md | 5 +++++ polaris-icons/icons/CropIcon.svg | 1 + polaris-icons/icons/CropIcon.yml | 10 ++++++++++ polaris-icons/icons/FlipHorizontalIcon.svg | 1 + polaris-icons/icons/FlipHorizontalIcon.yml | 11 +++++++++++ polaris-icons/icons/FlipVerticalIcon.svg | 1 + polaris-icons/icons/FlipVerticalIcon.yml | 11 +++++++++++ polaris-icons/icons/ImageMagicIcon.svg | 1 + polaris-icons/icons/ImageMagicIcon.yml | 11 +++++++++++ polaris-icons/icons/RemoveBackgroundIcon.svg | 1 + polaris-icons/icons/RemoveBackgroundIcon.yml | 12 ++++++++++++ polaris-icons/icons/RotateLeftIcon.svg | 1 + polaris-icons/icons/RotateLeftIcon.yml | 11 +++++++++++ polaris-icons/icons/RotateRightIcon.svg | 1 + polaris-icons/icons/RotateRightIcon.yml | 11 +++++++++++ 15 files changed, 89 insertions(+) create mode 100644 .changeset/hip-windows-exercise.md create mode 100644 polaris-icons/icons/CropIcon.svg create mode 100644 polaris-icons/icons/CropIcon.yml create mode 100644 polaris-icons/icons/FlipHorizontalIcon.svg create mode 100644 polaris-icons/icons/FlipHorizontalIcon.yml create mode 100644 polaris-icons/icons/FlipVerticalIcon.svg create mode 100644 polaris-icons/icons/FlipVerticalIcon.yml create mode 100644 polaris-icons/icons/ImageMagicIcon.svg create mode 100644 polaris-icons/icons/ImageMagicIcon.yml create mode 100644 polaris-icons/icons/RemoveBackgroundIcon.svg create mode 100644 polaris-icons/icons/RemoveBackgroundIcon.yml create mode 100644 polaris-icons/icons/RotateLeftIcon.svg create mode 100644 polaris-icons/icons/RotateLeftIcon.yml create mode 100644 polaris-icons/icons/RotateRightIcon.svg create mode 100644 polaris-icons/icons/RotateRightIcon.yml diff --git a/.changeset/hip-windows-exercise.md b/.changeset/hip-windows-exercise.md new file mode 100644 index 00000000000..da07c6f40f2 --- /dev/null +++ b/.changeset/hip-windows-exercise.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-icons': minor +--- + +Added some icons for image editing diff --git a/polaris-icons/icons/CropIcon.svg b/polaris-icons/icons/CropIcon.svg new file mode 100644 index 00000000000..1da0bd0fa95 --- /dev/null +++ b/polaris-icons/icons/CropIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/polaris-icons/icons/CropIcon.yml b/polaris-icons/icons/CropIcon.yml new file mode 100644 index 00000000000..7152175d110 --- /dev/null +++ b/polaris-icons/icons/CropIcon.yml @@ -0,0 +1,10 @@ +name: Crop +description: Used in media editing for croping an image. +keywords: + - crop +authors: + - David Goligorsky + - Joe Thomas + - Arda Karaçizmeli +date_added: 2024-03-28 +date_modified: 2024-03-28 diff --git a/polaris-icons/icons/FlipHorizontalIcon.svg b/polaris-icons/icons/FlipHorizontalIcon.svg new file mode 100644 index 00000000000..0746fce6d32 --- /dev/null +++ b/polaris-icons/icons/FlipHorizontalIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/polaris-icons/icons/FlipHorizontalIcon.yml b/polaris-icons/icons/FlipHorizontalIcon.yml new file mode 100644 index 00000000000..3cb9beb2927 --- /dev/null +++ b/polaris-icons/icons/FlipHorizontalIcon.yml @@ -0,0 +1,11 @@ +name: Flip horizontal +description: Used in media editing for flipping an image horizontally. +keywords: + - flip + - mirror + - horizontal +authors: + - David Goligorsky + - Arda Karaçizmeli +date_added: 2024-03-28 +date_modified: 2024-03-28 diff --git a/polaris-icons/icons/FlipVerticalIcon.svg b/polaris-icons/icons/FlipVerticalIcon.svg new file mode 100644 index 00000000000..351fd76210e --- /dev/null +++ b/polaris-icons/icons/FlipVerticalIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/polaris-icons/icons/FlipVerticalIcon.yml b/polaris-icons/icons/FlipVerticalIcon.yml new file mode 100644 index 00000000000..f8bc141c7a3 --- /dev/null +++ b/polaris-icons/icons/FlipVerticalIcon.yml @@ -0,0 +1,11 @@ +name: Flip vertical +description: Used in media editing for flipping an image vertically. +keywords: + - flip + - mirror + - vertical +authors: + - David Goligorsky + - Arda Karaçizmeli +date_added: 2024-03-28 +date_modified: 2024-03-28 diff --git a/polaris-icons/icons/ImageMagicIcon.svg b/polaris-icons/icons/ImageMagicIcon.svg new file mode 100644 index 00000000000..6902a1a269b --- /dev/null +++ b/polaris-icons/icons/ImageMagicIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/polaris-icons/icons/ImageMagicIcon.yml b/polaris-icons/icons/ImageMagicIcon.yml new file mode 100644 index 00000000000..a2bc1645960 --- /dev/null +++ b/polaris-icons/icons/ImageMagicIcon.yml @@ -0,0 +1,11 @@ +name: Image Magic +description: Used for signifying Magic media editing, like background removal and image generation. +keywords: + - Magic + - Generation + - Media +authors: + - David Goligorsky + - Arda Karaçizmeli +date_added: 2024-03-28 +date_modified: 2024-03-28 diff --git a/polaris-icons/icons/RemoveBackgroundIcon.svg b/polaris-icons/icons/RemoveBackgroundIcon.svg new file mode 100644 index 00000000000..e650d938bb0 --- /dev/null +++ b/polaris-icons/icons/RemoveBackgroundIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/polaris-icons/icons/RemoveBackgroundIcon.yml b/polaris-icons/icons/RemoveBackgroundIcon.yml new file mode 100644 index 00000000000..3f7c432d3d1 --- /dev/null +++ b/polaris-icons/icons/RemoveBackgroundIcon.yml @@ -0,0 +1,12 @@ +name: Remove background +description: Used to signify the background removal feature in Magic media editing. +keywords: + - Magic + - Background + - Removal + - Media +authors: + - David Goligorsky + - Arda Karaçizmeli +date_added: 2024-04-03 +date_modified: 2024-04-03 diff --git a/polaris-icons/icons/RotateLeftIcon.svg b/polaris-icons/icons/RotateLeftIcon.svg new file mode 100644 index 00000000000..a5c58b117b4 --- /dev/null +++ b/polaris-icons/icons/RotateLeftIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/polaris-icons/icons/RotateLeftIcon.yml b/polaris-icons/icons/RotateLeftIcon.yml new file mode 100644 index 00000000000..ec33690d49c --- /dev/null +++ b/polaris-icons/icons/RotateLeftIcon.yml @@ -0,0 +1,11 @@ +name: Rotate left +description: Used in media editing for rotating an image counterclockwise. +keywords: + - Rotate + - Left + - Counterclockwise +authors: + - David Goligorsky + - Arda Karaçizmeli +date_added: 2024-03-28 +date_modified: 2024-03-28 diff --git a/polaris-icons/icons/RotateRightIcon.svg b/polaris-icons/icons/RotateRightIcon.svg new file mode 100644 index 00000000000..f5470830d22 --- /dev/null +++ b/polaris-icons/icons/RotateRightIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/polaris-icons/icons/RotateRightIcon.yml b/polaris-icons/icons/RotateRightIcon.yml new file mode 100644 index 00000000000..c06ab8454f9 --- /dev/null +++ b/polaris-icons/icons/RotateRightIcon.yml @@ -0,0 +1,11 @@ +name: Rotate right +description: Used in media editing for rotating an image clockwise. +keywords: + - Rotate + - Right + - Clockwise +authors: + - David Goligorsky + - Arda Karaçizmeli +date_added: 2024-03-28 +date_modified: 2024-03-28