chore: remove & rename icons (#1696)

Author: joshuaellis

.changeset/angry-tigers-scream.md

@@ -0,0 +1,7 @@
+---
+'@strapi/icons': major
+---
+
+chore!: removes some icons and renames others
+
+Users should refer to the BREAKING_CHANGES.md for more information on how to migrate. Most of the icons have been visually changed. Snapshots will most likely need to be updated.

.changeset/proud-kings-relate.md

@@ -0,0 +1,7 @@
+---
+'@strapi/design-system': major
+---
+
+chore!: remove the Icon component
+
+Users should instead apply `fill` and `stroke` directly to the icon component as theme colors are now possible.

.gitignore

@@ -106,6 +106,8 @@ package-lock.json
 dist
 storybook-static
 **/strapi-icons/src/*
+!**/strapi-icons/src/index.ts
+!**/strapi-icons/src/symbols-index.ts
 
 ############################
 # Visual Studio Code

BREAKING_CHANGES.md

@@ -43,3 +43,321 @@ This was just a wrapped component around `Flex`. You should use `Flex` instead.
 #### `ToggleCheckbox`
 
 This is the same component as `ToggleInput` and therefore you should use that instead.
+
+### Icon Updates
+
+Many of the icons have been updated visually, this will effect snapshot tests. The default size is `1.6rem` for an icon, in the Strapi design-system this equates to 16px. We have also ensured that `paths` do not have any `fill` or `stroke` properties set, this allows the icon to be styled with CSS except for specific use cases we don't expect users to encounter. The default `color` is `currentColor` which means it will inherit the color of the parent element.
+
+The following icons have been removed:
+
+#### Apps
+
+Replaced with `GridNine`
+
+#### Attachment
+
+Replaced with `Paperclip`
+
+#### Blocks
+
+Replaced with `BlocksField` and exported from `@strapi/icons/symbols`.
+
+#### Boolean
+
+Replaced with `BooleanField` and exported from `@strapi/icons/symbols`
+
+#### Brush
+
+Replaced with `PaintBrush`
+
+#### CarretDown
+
+Replaced with `CaretDown`
+
+#### CarretUp
+
+Replaced with `CaretUp`
+
+#### CodeSquare
+
+Now exported from `@strapi/icons/symbols`
+
+#### Component
+
+Replaced with `ComponentField` and exported from `@strapi/icons/symbols`
+
+#### Connector
+
+Replaced with `Faders`
+
+#### Cube
+
+Removed.
+
+#### Cup
+
+Replaced with `Coffee`
+
+#### Dashboard
+
+Replaced with `SquareFour`
+
+#### Date
+
+Replaced with `DateField`
+
+#### Discord
+
+Now exported from `@strapi/icons/symbols`
+
+#### Discourse
+
+Now exported from `@strapi/icons/symbols`
+
+#### Doctor
+
+Replaced with `Stethoscope`
+
+#### Dot
+
+Removed.
+
+#### DynamicZone
+
+Replaced with `DynamicZoneField` and exported from `@strapi/icons/symbols`
+
+#### Email
+
+Replaced with `EmailField` and exported from `@strapi/icons/symbols`
+
+#### EmptyData
+
+Now exported from `@strapi/icons/symbols`
+
+#### EmptyDocuments
+
+Now exported from `@strapi/icons/symbols`
+
+#### EmptyPermissions
+
+Now exported from `@strapi/icons/symbols`
+
+#### EmptyPictures
+
+Now exported from `@strapi/icons/symbols`
+
+#### Enumeration
+
+Replaced with `EnumerationField` and exported from `@strapi/icons/symbols`
+
+#### Envelop
+
+Replaced with `Mail`
+
+#### Equalizer
+
+Replaced with `SlidersHorizontal`
+
+#### ExclamationMarkCircle
+
+Replaced with `WarningCircle`
+
+#### Exit
+
+Replaced with `SignOut`
+
+#### Facebook
+
+Now exported from `@strapi/icons/symbols`
+
+#### FeatherSquare
+
+Now exported from `@strapi/icons/symbols`
+
+#### Gate
+
+Replaced with `CastleTurret`
+
+#### Github
+
+Now exported from `@strapi/icons/symbols`
+
+#### GlassesSquare
+
+Now exported from `@strapi/icons/symbols`
+
+#### Grid
+
+Replaced with `GridFour`
+
+#### Headphone
+
+Replaced with `Headphones`
+
+#### History
+
+Replaced with `ClockCounterClockwise`
+
+#### InformationSquare
+
+Now exported from `@strapi/icons/symbols`
+
+#### Json
+
+Replaced with `JsonField` and exported from `@strapi/icons/symbols`
+
+#### Landscape
+
+Replaced with `Images`
+
+#### LandscapeSmall
+
+Replaced with `Images`
+
+#### Layer
+
+Replaced with `ListPlus`
+
+#### LinkSmall
+
+Replaced with `Link`
+
+#### Media
+
+Replaced with `MediaField` and exported from `@strapi/icons/symbols`
+
+#### Medium
+
+Now exported from `@strapi/icons/symbols`
+
+#### MenuBurger
+
+Replaced with `List`
+
+#### MinusOutlined
+
+Replaced with `MinusCircle`
+
+#### Music
+
+Replaced with `MusicNotes`
+
+#### Number
+
+Replaced with `NumberField` and exported from `@strapi/icons/symbols`
+
+#### OnholdCarretDown
+
+Replaced with `CaretDown`
+
+#### OnholdCarretUp
+
+Replaced with `CaretUp`
+
+#### Paint
+
+Replaced with `PaintBrush`
+
+#### Password
+
+Replaced with `PasswordField`
+
+#### Picture
+
+Replaced with `Image`
+
+#### PicturePlus
+
+Replaced with `PlusCircle`
+
+#### PlaySquare
+
+Now exported from `@strapi/icons/symbols`
+
+#### Puzzle
+
+Replaced with `PuzzlePiece`
+
+#### Quote
+
+Replaced with `Quotes`
+
+#### QuoteClosed
+
+Replaced with `Quotes`
+
+#### Reddit
+
+Now exported from `@strapi/icons/symbols`
+
+#### Refresh
+
+Replaced with `ArrowClockwise`
+
+#### Relation
+
+Replaced with `RelationField` and exported from `@strapi/icons/symbols`
+
+#### Repeat
+
+Removed.
+
+#### RichText
+
+Replaced with `RichTextField` and exported from `@strapi/icons/symbols`
+
+#### Rotate
+
+Replaced with `ArrowsCounterClockwise`
+
+#### SearchIcon
+
+Removed, use `Search` instead.
+
+#### Seed
+
+Replaced with `Plant`
+
+#### Slideshow
+
+Replaced with `PresentationChart`
+
+#### Spark
+
+Replaced with `Sparkle`
+
+#### Spinner
+
+Replaced with `Loader`
+
+#### Strapi
+
+Now exported from `@strapi/icons/symbols`
+
+#### Text
+
+Replace with `TextField` and exported from `@strapi/icons/symbols`
+
+#### Twitter
+
+Replaced with `X` and exported from `@strapi/icons/symbols`
+
+#### Uid
+
+Replaced with `UidField` and exported from `@strapi/icons/symbols`
+
+#### Write
+
+Replaced with `Feather`
+
+## Icon has been removed
+
+The `Icon` component has been removed. It's primary function was to allow you to apply theme colors to icons, this is now doable with the actual icon:
+
+```ts
+// before
+<Icon as={Plus} color="primary700" />
+
+// after
+<Plus fill="primary700" />
+```

docs/.storybook/main.ts

@@ -12,6 +12,9 @@ const config: StorybookConfig = {
         allowSyntheticDefaultImports: false,
         esModuleInterop: false,
       },
+      propFilter: () => {
+        return true;
+      },
     },
   },
   viteFinal: (config) => {
@@ -40,10 +43,6 @@ const config: StorybookConfig = {
     name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
-
-  docs: {
-    autodocs: true,
-  },
 };
 
 function getAbsolutePath<T extends string>(value: T): T {

docs/.storybook/preview.tsx

@@ -26,10 +26,21 @@ const preview: Preview = {
   parameters: {
     options: {
       storySort: {
-        order: ['Design System', ['Primitives', 'Technical Components', 'Components']],
+        order: [
+          'Foundations',
+          ['Overview', 'Icons', ['Overview', '*']],
+          'Primitives',
+          ['Overview', '*'],
+          'Design System',
+          ['Technical Components', 'Components'],
+          'Utilities',
+        ],
       },
     },
     actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      expanded: true,
+    },
     darkMode: {
       // Override the default dark theme
       dark: createCustomTheme({ theme: darkTheme, asStorybookTheme: false }),