Shahed Nasser
d1a1135328
* docs: create a new UI docs project (#13233) * docs: create a new UI docs project * fix installation errors * docs: migrate UI docs content to new project (#13241) * Fix content * added examples for some components * finish adding examples * lint fix * fix build errors * delete empty files * path fixes + refactor * fix build error
81 lines
1.8 KiB
Plaintext
81 lines
1.8 KiB
Plaintext
import { IconSearch } from "@/components/IconSearch"
|
|
import { ComponentExample } from "@/components/ComponentExample"
|
|
import { Prerequisites } from "docs-ui"
|
|
|
|
export const metadata = {
|
|
title: `Icons`,
|
|
}
|
|
|
|
# {metadata.title}
|
|
|
|
In this guide, you'll learn how to install and use Medusa UI icons.
|
|
|
|
The Medusa UI icons package is a collection of React icon components from Medusa's design system. You can use these icons either in your Medusa Admin customizations, or in your standalone React projects.
|
|
|
|
## Installation
|
|
|
|
The Medusa UI icons package is available by default in your Medusa application, so you can use them in your Medusa Admin customizations without any additional installation steps.
|
|
|
|
### Installation in Standalone Projects
|
|
|
|
<Prerequisites
|
|
items={[
|
|
{
|
|
text: "React 16.8+ installed in your project.",
|
|
link: "https://react.dev/",
|
|
}
|
|
]}
|
|
/>
|
|
|
|
To install the Medusa UI icons package in your React-based project, run the following command:
|
|
|
|
```bash npm2yarn
|
|
npm install @medusajs/icons
|
|
```
|
|
|
|
---
|
|
|
|
## Usage
|
|
|
|
You can import and use the icons in your React components:
|
|
|
|
```tsx
|
|
import { Sun } from "@medusajs/icons"
|
|
|
|
export default function Component() {
|
|
return (
|
|
<Sun />
|
|
)
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Icons List
|
|
|
|
Below is a list of all the icons available in the Medusa UI design system. Click on any icon to copy its component name.
|
|
|
|
<IconSearch />
|
|
|
|
---
|
|
|
|
## Icon Props
|
|
|
|
Icons accept all props that an `svg` element accepts.
|
|
|
|
### Icon Color
|
|
|
|
By default, outline icons' stroke color and solid icon's fill color are set to `currentColor`.
|
|
|
|
You can set a different color by passing the `color` prop.
|
|
|
|
<ComponentExample name="icon-color" />
|
|
|
|
You can also use a CSS class by passing the `className` prop.
|
|
|
|
<ComponentExample name="icon-color-classes" />
|
|
|
|
### Icon Size
|
|
|
|
All icon's width and height are `20px` and it's not possible to change them.
|