Merge pull request #3694 from udecode/refactor/remove-icons

Remove icons

Author: zbeyens

apps/www/content/docs/components/changelog.mdx

@@ -11,9 +11,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## October 2024 #15
 
-### October 27 #15.6
+### October 31 #15.6
 
 - Fixed and modified some styles in emoji and color picker
+- Remove `Icons` file dependency. All icons are now imported from `lucide-react`.
 
 ### October 26 #15.5
 

apps/www/content/docs/components/installation/manual.mdx

@@ -19,6 +19,8 @@ Add the following dependencies to your project:
 npm install @udecode/cn tailwindcss-animate class-variance-authority tailwind-merge lucide-react
 ```
 
+We use icons from [Lucide](https://lucide.dev). You can use any icon library you want.
+
 ### Configure tailwind.config.js
 
 Here's what demo `tailwind.config.js` looks like:
@@ -37,14 +39,6 @@ Add the following to your `styles/globals.css` file. You can learn more about us
   open
 />
 
-### Add icons
-
-Add the icons you'll use in `components/icons.tsx`:
-
-<ComponentSource src="../../templates/plate-playground-template/src/components/icons.tsx" />
-
-We use icons from [Lucide](https://lucide.dev). You can use any icon library you want.
-
 ### Add components
 
 You can now start adding components to your project.

apps/www/content/docs/components/installation/next.mdx

@@ -35,14 +35,6 @@ Which color would you like to use as base color? › Slate
 Do you want to use CSS variables for colors? › no / yes
 ```
 
-### Add icons
-
-Add the icons you'll use in `components/icons.tsx`:
-
-<ComponentSource src="../../templates/plate-playground-template/src/components/icons.tsx" />
-
-We use icons from [Lucide](https://lucide.dev). You can use any icon library you want.
-
 ### Add components
 
 You can now start adding components to your project.

apps/www/content/docs/components/installation/vite.mdx

@@ -109,14 +109,6 @@ Which color would you like to use as base color? › Slate
 Do you want to use CSS variables for colors? › no / yes
 ```
 
-### Add icons
-
-Add the icons you'll use in `components/icons.tsx`:
-
-<ComponentSource src="../../templates/plate-playground-template/src/components/icons.tsx" />
-
-We use icons from [Lucide](https://lucide.dev). You can use any icon library you want.
-
 ### Add components
 
 You can now start adding components to your project.

apps/www/src/components/icons.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import type { IconProps } from '@radix-ui/react-icons/dist/types';
 
-import { cva } from 'class-variance-authority';
 import {
   type LucideIcon,
   type LucideProps,
@@ -101,96 +100,6 @@ import {
 
 export type Icon = LucideIcon;
 
-const borderAll = (props: LucideProps) => (
-  <svg
-    fill="currentColor"
-    focusable="false"
-    height="48"
-    role="img"
-    viewBox="0 0 24 24"
-    width="48"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path d="M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6zm10 13h5a1 1 0 0 0 1-1v-5h-6v6zm-2-6H5v5a1 1 0 0 0 1 1h5v-6zm2-2h6V6a1 1 0 0 0-1-1h-5v6zm-2-6H6a1 1 0 0 0-1 1v5h6V5z" />
-  </svg>
-);
-
-const borderBottom = (props: LucideProps) => (
-  <svg
-    fill="currentColor"
-    focusable="false"
-    height="48"
-    role="img"
-    viewBox="0 0 24 24"
-    width="48"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path d="M13 5a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm-8 6a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm-2 7a1 1 0 1 1 2 0 1 1 0 0 0 1 1h12a1 1 0 0 0 1-1 1 1 0 1 1 2 0 3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm17-8a1 1 0 0 0-1 1v2a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1zM7 4a1 1 0 0 0-1-1 3 3 0 0 0-3 3 1 1 0 0 0 2 0 1 1 0 0 1 1-1 1 1 0 0 0 1-1zm11-1a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3z" />
-  </svg>
-);
-
-const borderLeft = (props: LucideProps) => (
-  <svg
-    fill="currentColor"
-    focusable="false"
-    height="48"
-    role="img"
-    viewBox="0 0 24 24"
-    width="48"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path d="M6 21a1 1 0 1 0 0-2 1 1 0 0 1-1-1V6a1 1 0 0 1 1-1 1 1 0 0 0 0-2 3 3 0 0 0-3 3v12a3 3 0 0 0 3 3zm7-16a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm6 6a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-5 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm4-17a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3zm-1 17a1 1 0 0 0 1 1 3 3 0 0 0 3-3 1 1 0 1 0-2 0 1 1 0 0 1-1 1 1 1 0 0 0-1 1z" />
-  </svg>
-);
-
-const borderNone = (props: LucideProps) => (
-  <svg
-    fill="currentColor"
-    focusable="false"
-    height="48"
-    role="img"
-    viewBox="0 0 24 24"
-    width="48"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path d="M14 4a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm-9 7a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm14 0a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-6 10a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zM7 4a1 1 0 0 0-1-1 3 3 0 0 0-3 3 1 1 0 0 0 2 0 1 1 0 0 1 1-1 1 1 0 0 0 1-1zm11-1a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3zM7 20a1 1 0 0 1-1 1 3 3 0 0 1-3-3 1 1 0 1 1 2 0 1 1 0 0 0 1 1 1 1 0 0 1 1 1zm11 1a1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 1 1 2 0 3 3 0 0 1-3 3z" />
-  </svg>
-);
-
-const borderRight = (props: LucideProps) => (
-  <svg
-    fill="currentColor"
-    focusable="false"
-    height="48"
-    role="img"
-    viewBox="0 0 24 24"
-    width="48"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path d="M13 5a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm-8 6a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm9 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zM6 3a1 1 0 0 1 0 2 1 1 0 0 0-1 1 1 1 0 0 1-2 0 3 3 0 0 1 3-3zm1 17a1 1 0 0 1-1 1 3 3 0 0 1-3-3 1 1 0 1 1 2 0 1 1 0 0 0 1 1 1 1 0 0 1 1 1zm11 1a1 1 0 1 1 0-2 1 1 0 0 0 1-1V6a1 1 0 0 0-1-1 1 1 0 1 1 0-2 3 3 0 0 1 3 3v12a3 3 0 0 1-3 3z" />
-  </svg>
-);
-
-const borderTop = (props: LucideProps) => (
-  <svg
-    fill="currentColor"
-    focusable="false"
-    height="48"
-    role="img"
-    viewBox="0 0 24 24"
-    width="48"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path d="M3 6a1 1 0 0 0 2 0 1 1 0 0 1 1-1h12a1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3zm2 5a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm14 0a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-5 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm-8 1a1 1 0 1 0 0-2 1 1 0 0 1-1-1 1 1 0 1 0-2 0 3 3 0 0 0 3 3zm11-1a1 1 0 0 0 1 1 3 3 0 0 0 3-3 1 1 0 1 0-2 0 1 1 0 0 1-1 1 1 1 0 0 0-1 1z" />
-  </svg>
-);
-
 const discord = (props: LucideProps) => (
   <svg
     fill="none"
@@ -271,96 +180,6 @@ const yarn = (props: LucideProps) => (
   </svg>
 );
 
-export const DoubleColumnOutlined = (props: LucideProps) => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      clipRule="evenodd"
-      d="M8.5 3H13V13H8.5V3ZM7.5 2H8.5H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H8.5H7.5H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H7.5ZM7.5 13H3L3 3H7.5V13Z"
-      fill="#595E6F"
-      fillRule="evenodd"
-    />
-  </svg>
-);
-
-export const ThreeColumnOutlined = (props: LucideProps) => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      clipRule="evenodd"
-      d="M9.25 3H6.75V13H9.25V3ZM9.25 2H6.75H5.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H5.75H6.75H9.25H10.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H10.25H9.25ZM10.25 3V13H13V3H10.25ZM3 13H5.75V3H3L3 13Z"
-      fill="#4C5161"
-      fillRule="evenodd"
-    />
-  </svg>
-);
-
-export const RightSideDoubleColumnOutlined = (props: LucideProps) => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      clipRule="evenodd"
-      d="M11.25 3H13V13H11.25V3ZM10.25 2H11.25H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H11.25H10.25H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H10.25ZM10.25 13H3L3 3H10.25V13Z"
-      fill="#595E6F"
-      fillRule="evenodd"
-    />
-  </svg>
-);
-
-export const LeftSideDoubleColumnOutlined = (props: LucideProps) => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      clipRule="evenodd"
-      d="M5.75 3H13V13H5.75V3ZM4.75 2H5.75H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H5.75H4.75H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H4.75ZM4.75 13H3L3 3H4.75V13Z"
-      fill="#595E6F"
-      fillRule="evenodd"
-    />
-  </svg>
-);
-
-export const DoubleSideDoubleColumnOutlined = (props: LucideProps) => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      clipRule="evenodd"
-      d="M10.25 3H5.75V13H10.25V3ZM10.25 2H5.75H4.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.75H5.75H10.25H11.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H11.25H10.25ZM11.25 3V13H13V3H11.25ZM3 13H4.75V3H3L3 13Z"
-      fill="#595E6F"
-      fillRule="evenodd"
-    />
-  </svg>
-);
-
 const LayoutIcon = (props: LucideProps) => (
   <svg
     fill="currentColor"
@@ -388,7 +207,6 @@ const LayoutIcon = (props: LucideProps) => (
 );
 
 export const Icons = {
-  LayoutIcon,
   add: Plus,
   ai: Sparkles,
   alignCenter: AlignCenter,
@@ -403,12 +221,6 @@ export const Icons = {
   bg: PaintBucket,
   blockquote: Quote,
   bold: Bold,
-  borderAll,
-  borderBottom,
-  borderLeft,
-  borderNone,
-  borderRight,
-  borderTop,
   check: Check,
   chevronDown: ChevronDown,
   chevronLeft: ChevronLeft,
@@ -433,8 +245,6 @@ export const Icons = {
   dependency: Link,
   discord,
   done: Check,
-  doubleColumn: DoubleColumnOutlined,
-  doubleSideDoubleColumn: DoubleSideDoubleColumnOutlined,
   download: DownloadIcon,
   downloadCloud: DownloadCloud,
   dragHandle: GripVertical,
@@ -460,7 +270,6 @@ export const Icons = {
   italic: Italic,
   kbd: Keyboard,
   laptop: Laptop,
-  leftSideDoubleColumn: LeftSideDoubleColumnOutlined,
   lineHeight: WrapText,
   link: Link2,
   makeLonger: ListPlus,
@@ -480,7 +289,6 @@ export const Icons = {
   radix,
   react,
   refresh: RotateCcw,
-  rightSideDoubleColumn: RightSideDoubleColumnOutlined,
   row: RectangleHorizontal,
   search: Search,
   settings: Settings,
@@ -497,7 +305,6 @@ export const Icons = {
   table: Table,
   tailwind,
   text: Text,
-  threeColumn: ThreeColumnOutlined,
   todo: Square,
   translate: Languages,
   trash: Trash,
@@ -520,17 +327,3 @@ export const Icons = {
   viewing: Eye,
   yarn,
 };
-
-export const iconVariants = cva('', {
-  defaultVariants: {},
-  variants: {
-    size: {
-      md: 'mr-2 size-6',
-      sm: 'mr-2 size-4',
-    },
-    variant: {
-      menuItem: 'mr-2 size-5',
-      toolbar: 'size-5',
-    },
-  },
-});