Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove icons #3694

Merged
merged 2 commits into from
Oct 31, 2024
Merged

Remove icons #3694

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ae1e70a
refactor
zbeyens Oct 31, 2024
4e967a1
doc
zbeyens Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion apps/www/content/docs/components/changelog.mdx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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