Skip to content

Commit

Permalink
Merge pull request #3694 from udecode/refactor/remove-icons
Browse files Browse the repository at this point in the history 
Remove icons
  • Loading branch information
@zbeyens
zbeyens authored Oct 31, 2024
2 parents c217b6b + 4e967a1 commit d0d7d0f
Show file tree
Hide file tree
Showing 20 changed files with 292 additions and 368 deletions.
3 changes: 2 additions & 1 deletion apps/www/content/docs/components/changelog.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
10 changes: 2 additions & 8 deletions apps/www/content/docs/components/installation/manual.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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.
Expand Down
8 changes: 0 additions & 8 deletions apps/www/content/docs/components/installation/next.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
8 changes: 0 additions & 8 deletions apps/www/content/docs/components/installation/vite.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
207 changes: 0 additions & 207 deletions apps/www/src/components/icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -388,7 +207,6 @@ const LayoutIcon = (props: LucideProps) => (
);

export const Icons = {
LayoutIcon,
add: Plus,
ai: Sparkles,
alignCenter: AlignCenter,
Expand All @@ -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,
Expand All @@ -433,8 +245,6 @@ export const Icons = {
dependency: Link,
discord,
done: Check,
doubleColumn: DoubleColumnOutlined,
doubleSideDoubleColumn: DoubleSideDoubleColumnOutlined,
download: DownloadIcon,
downloadCloud: DownloadCloud,
dragHandle: GripVertical,
Expand All @@ -460,7 +270,6 @@ export const Icons = {
italic: Italic,
kbd: Keyboard,
laptop: Laptop,
leftSideDoubleColumn: LeftSideDoubleColumnOutlined,
lineHeight: WrapText,
link: Link2,
makeLonger: ListPlus,
Expand All @@ -480,7 +289,6 @@ export const Icons = {
radix,
react,
refresh: RotateCcw,
rightSideDoubleColumn: RightSideDoubleColumnOutlined,
row: RectangleHorizontal,
search: Search,
settings: Settings,
Expand All @@ -497,7 +305,6 @@ export const Icons = {
table: Table,
tailwind,
text: Text,
threeColumn: ThreeColumnOutlined,
todo: Square,
translate: Languages,
trash: Trash,
Expand All @@ -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',
},
},
});
Loading

0 comments on commit d0d7d0f

Please sign in to comment.