Skip to content

Commit 6551c69

Browse files
handotdevhandotdev
committed
Add icons to all components
1 parent 68b1b89 commit 6551c69

File tree

15 files changed

+90
-132
lines changed

15 files changed

+90
-132
lines changed

‎content/components/accordion-groups.mdx‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎content/components/accordions.mdx‎

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: "Accordions"
33
description: "A dropdown component to toggle content visibility"
4+
icon: "chevron-down"
45
---
56

67
<Accordion title="I am an Accordion.">
@@ -30,9 +31,35 @@ description: "A dropdown component to toggle content visibility"
3031
</Accordion>
3132
````
3233

34+
````jsx Accordion Group Example
35+
<AccordionGroup>
36+
<Accordion title="FAQ without Icon">
37+
You can put other components inside Accordions.
38+
39+
```java HelloWorld.java
40+
class HelloWorld {
41+
public static void main(String[] args) {
42+
System.out.println("Hello, World!");
43+
}
44+
}
45+
```
46+
47+
Check out the [Accordion](/content/components/accordions) docs for all the supported props.
48+
</Accordion>
49+
50+
<Accordion title="FAQ with Icon" icon="alien-8bit">
51+
Check out the [Accordion](/content/components/accordions) docs for all the supported props.
52+
</Accordion>
53+
54+
<Accordion title="FAQ without Icon">
55+
Check out the [Accordion](/content/components/accordions) docs for all the supported props.
56+
</Accordion>
57+
</AccordionGroup>
58+
````
59+
3360
</RequestExample>
3461

35-
## Props
62+
### Props
3663

3764
<ResponseField name="title" type="string" required>
3865
Title in the Accordion preview.
@@ -57,3 +84,32 @@ description: "A dropdown component to toggle content visibility"
5784
</ResponseField>
5885

5986
Use [AccordionGroup](/content/components/accordion-groups) to create a group of Accordions.
87+
88+
## Accordion Groups
89+
90+
You can group multiple accordions into a single display. Simply add `<AccordionGroup>` around your existing `<Accordion>` components.
91+
92+
<AccordionGroup>
93+
<Accordion title="FAQ without Icon">
94+
You can put other components inside Accordions.
95+
96+
```java HelloWorld.java
97+
class HelloWorld {
98+
public static void main(String[] args) {
99+
System.out.println("Hello, World!");
100+
}
101+
}
102+
```
103+
104+
Check out the [Accordion](/content/components/accordions) docs for all the supported props.
105+
106+
</Accordion>
107+
108+
<Accordion title="FAQ with Icon" icon="bot">
109+
Check out the [Accordion](/content/components/accordions) docs for all the supported props.
110+
</Accordion>
111+
112+
<Accordion title="FAQ without Icon">
113+
Check out the [Accordion](/content/components/accordions) docs for all the supported props.
114+
</Accordion>
115+
</AccordionGroup>

‎content/components/callouts.mdx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,35 @@
11
---
2-
title: 'Callout Boxes'
2+
title: 'Callouts'
33
description: 'Use callouts to add eye-catching context to your content'
4+
icon: 'info'
45
---
56

67
Callouts can be styled as a Note, Warning, Info, Tip, or Check:
78

8-
### Note Callouts
9-
109
<Note>This adds a note in the content</Note>
1110

1211
```jsx
1312
<Note>This adds a note in the content</Note>
1413
```
1514

16-
### Warning Callouts
17-
1815
<Warning>This raises a warning to watch out for</Warning>
1916

2017
```jsx
2118
<Warning>This raises a warning to watch out for</Warning>
2219
```
2320

24-
### Info Callouts
25-
2621
<Info>This draws attention to important information</Info>
2722

2823
```jsx
2924
<Info>This draws attention to important information</Info>
3025
```
3126

32-
### Tip Callouts
33-
3427
<Tip>This suggests a helpful tip</Tip>
3528

3629
```jsx
3730
<Tip>This suggests a helpful tip</Tip>
3831
```
3932

40-
### Check Callouts
41-
4233
<Check>This brings us a checked status</Check>
4334

4435
```jsx

‎content/components/card-groups.mdx‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,36 @@
11
---
2-
title: 'Card Groups'
2+
title: 'Columns'
33
description: 'Show cards side by side in a grid format'
4+
icon: 'columns-2'
45
---
56

67
The `CardGroup` component lets you group multiple `Card` components together. It's most often used to put multiple cards in a grid, by specifying the number of grid columns.
78

89
<CardGroup cols={2}>
9-
<Card title="First Card" icon="square-1">
10+
<Card title="First Card" icon="panel-left-close">
1011
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
1112
</Card>
12-
<Card title="Second Card" icon="square-2">
13+
<Card title="Second Card" icon="panel-right-close">
1314
Lorem ipsum dolor sit amet, consectetur adipiscing elit
1415
</Card>
15-
<Card title="Third Card" icon="square-3">
16-
Ut enim ad minim veniam, quis nostrud exercitation ullamco
17-
</Card>
18-
<Card title="Fourth Card" icon="square-4">
19-
Excepteur sint occaecat cupidatat non proident
20-
</Card>
2116
</CardGroup>
2217

2318
<RequestExample>
2419

2520
```jsx Card Group Example
2621
<CardGroup cols={2}>
27-
<Card title="First Card" icon="square-1">
22+
<Card title="First Card">
2823
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
2924
</Card>
30-
<Card title="Second Card" icon="square-2">
25+
<Card title="Second Card">
3126
Lorem ipsum dolor sit amet, consectetur adipiscing elit
3227
</Card>
33-
<Card title="Third Card" icon="square-3">
34-
Ut enim ad minim veniam, quis nostrud exercitation ullamco
35-
</Card>
36-
<Card title="Fourth Card" icon="square-4">
37-
Excepteur sint occaecat cupidatat non proident
38-
</Card>
3928
</CardGroup>
4029
```
4130

4231
</RequestExample>
4332

44-
## Props
33+
### Props
4534

4635
<ResponseField name="cols" default={2}>
4736
The number of columns per row

‎content/components/cards.mdx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
---
22
title: "Cards"
33
description: "Highlight main points or links with customizable icons"
4+
icon: 'square-mouse-pointer'
45
---
56

6-
<Card title="Card Title" icon="link" href="/content/components/card-groups">
7+
<Card title="Card Title" icon="text" href="/content/components/card-groups">
78
This is how you use a card with an icon and a link. Clicking on this card
89
brings you to the Card Group page.
910
</Card>
1011

1112
<RequestExample>
1213
```jsx Card Example
13-
<Card title="Click on me" icon="link" href="/content/components/card-group">
14+
<Card title="Click on me" icon="text" href="/content/components/card-group">
1415
This is how you use a card with an icon and a link. Clicking on this card
1516
brings you to the Card Group page.
1617
</Card>
@@ -28,7 +29,7 @@ description: "Highlight main points or links with customizable icons"
2829

2930
Add a `horizontal` property to make it horizontally displayed.
3031

31-
<Card title="Horizontal Card" icon="text-size" horizontal>
32+
<Card title="Horizontal Card" icon="text" horizontal>
3233
Here is an example of a horizontal card
3334
</Card>
3435

@@ -70,7 +71,7 @@ You can customize the CTA and whether or not to display the arrow on the card. B
7071
```
7172
</RequestExample>
7273

73-
## Props
74+
### Props
7475

7576
<ResponseField name="title" type="string" required>
7677
The title of the card

‎content/components/code-groups.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: "Code Groups"
33
description: "The CodeGroup component lets you combine code blocks in a display separated by tabs"
4+
icon: 'group'
45
---
56

67
You will need to make [Code Blocks](/content/components/code) then add the `<CodeGroup>` component around them. Every Code Block must have a filename because we use the names for the tab buttons.

‎content/components/code.mdx‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
2-
title: "Code Blocks"
2+
title: "Code"
33
description: "Display code with optional syntax highlighting"
4+
icon: 'code'
45
---
56

67
<RequestExample>
@@ -13,11 +14,11 @@ const hello = "world";
1314

1415
</RequestExample>
1516

16-
## Basic Code Block
17+
## Code Block
1718

1819
Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks.
1920

20-
```
21+
```js
2122
helloWorld();
2223
```
2324

@@ -190,15 +191,3 @@ function sayHello() {
190191
sayHello();
191192
```
192193
````
193-
194-
## Code Groups
195-
196-
Want to display multiple code examples in one code box? Check out the Code Group docs:
197-
198-
<Card
199-
title="Code Group"
200-
href="/content/components/code-groups"
201-
icon="columns-3"
202-
>
203-
Read the reference for the Code Group component
204-
</Card>

‎content/components/frames.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: "Frames"
33
description: "Use the Frame component to wrap images or other components in a container."
4+
icon: 'frame'
45
---
56

67
Frames are very helpful if you want to center an image.

‎content/components/icons.mdx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
---
22
title: "Icons"
3-
description: "Use [Font Awesome](https://fontawesome.com/icons) or [Lucide](https://lucide.dev/icons) icons anywhere in the doc"
3+
description: "Use icons from popular icon libraries"
4+
icon: 'flag'
45
---
56

6-
<Icon icon="check" size={32} />
7+
<Icon icon="flag" size={32} />
78

89
<RequestExample>
910

1011
```jsx Icon Example
11-
<Icon icon="check" size={32} />
12+
<Icon icon="flag" size={32} />
1213
```
1314
</RequestExample>
1415

@@ -17,12 +18,12 @@ description: "Use [Font Awesome](https://fontawesome.com/icons) or [Lucide](http
1718
The icon will be placed inline when used in a paragraph.
1819

1920
```markdown Inline Icon Example
20-
<Icon icon="check" iconType="solid" /> The documentation you want, effortlessly
21+
<Icon icon="flag" iconType="solid" /> The documentation you want, effortlessly
2122
```
2223

23-
<Icon icon="check" iconType="solid" /> The documentation you want, effortlessly
24+
<Icon icon="flag" iconType="solid" /> The documentation you want, effortlessly
2425

25-
## Props
26+
### Props
2627

2728
<ResponseField name="icon" type="string" required>
2829
A [Font Awesome](https://fontawesome.com/icons) or [Lucide](https://lucide.dev/icons) icon

‎content/components/mermaid-diagrams.mdx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
2-
title: 'Mermaid Diagrams'
2+
title: 'Mermaid'
33
description: 'Display diagrams using Mermaid'
4+
icon: 'waypoints'
45
---
56

67
<RequestExample>
@@ -49,16 +50,6 @@ description: 'Display diagrams using Mermaid'
4950
outside ---> top2
5051
```
5152

52-
You can create the following using Mermaid diagrams:
53-
54-
- Flowchart
55-
- Sequence diagram
56-
- Class diagram
57-
- State diagram
58-
- Entity relationship diagram
59-
- User journey
60-
- and more
61-
6253
For a complete list of diagrams supported by Mermaid, check out their [website](https://mermaid.js.org/).
6354

6455
## Syntax for Mermaid diagrams

0 commit comments

Comments
 (0)