MynaUI Icons

To use MynaUI icons in a standard HTML project, include the mynaui.css stylesheet in your <head> section.

<link rel="stylesheet" href="path/to/mynaui.css" />

You can install the MynaUI Icons React package using npm, bun, or yarn.

npm i @mynaui/icons-react

bun i @mynaui/icons-react

yarn add @mynaui/icons-react

You can install the core icon package or the React-specific package using your preferred package manager.

Core Icons Package: Use @mynaui/icons for standard usage.

React Icons Package: Use @mynaui/icons-react for React projects to access icon components.

Alternatively, you can download the packages directly from the GitHub releases page.

# Core package
npm i @mynaui/icons
# or
bun i @mynaui/icons
# or
yarn add @mynaui/icons

# React package
npm i @mynaui/icons-react
# or
bun i @mynaui/icons-react
# or
yarn add @mynaui/icons-react

To use MynaUI icons in Avalonia, you must first merge the icon resource dictionaries into your App.axaml. You can then reference the icon data using StaticResource with the icon name (e.g., ArrowDown or ArrowDownSolid).

<!-- App.axaml -->
<Application.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <MergeResourceInclude Source="/Assets/mynaui.axaml" />
      <MergeResourceInclude Source="/Assets/mynaui-solid.axaml" />
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Application.Resources>

<!-- Your Design -->
<PathIcon Data="{StaticResource ArrowDown}" Foreground="Green" />
<PathIcon Data="{StaticResource ArrowDownSolid}" Foreground="Green" />

To use the icons, import the specific icon component from @mynaui/icons-react and render it within your JSX. You can pass props to customize the appearance.

import { Heart } from "@mynaui/icons-react";

const App = () => {
  return <Heart color="green" />;
};

In React projects, import specific icon components from @mynaui/icons-react. Each icon is available as a component that accepts styling props.

import { ArrowDown } from '@mynaui/icons-react';

const App = () => {
  return <ArrowDown color="green" />;
};

Each icon component accepts the following props to control its visual properties:

When using @mynaui/icons-react, you can customize the icon appearance using the following props:

| name     | type   | default      |
| -------- | ------ | ------------ |
| `size`   | Number | 24           |
| `color`  | String | currentColor |
| `stroke` | Number | 1.5          |