# @ayalab/svelte-context-icons

> Lightweight and configurable icons for Svelte

Latest version **0.3.0** (published 2024-02-29) · 0 weekly downloads

## Install

```sh
npm install @ayalab/svelte-context-icons
pnpm add @ayalab/svelte-context-icons
yarn add @ayalab/svelte-context-icons
bun add @ayalab/svelte-context-icons
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2024-02-29 |
| First published | 2021-11-28 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 7.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Anton Aksionau |
| Maintainers | ikari132 |
| Keywords | svelte, icons, context, context-icons |

## Links

- npm: https://www.npmjs.com/package/@ayalab/svelte-context-icons
- npm.io page: https://npm.io/package/@ayalab/svelte-context-icons

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 0.3.0 (latest) — 2024-02-29
- 0.2.1 — 2023-09-25
- 0.2.0 — 2023-09-14
- 0.1.8 — 2023-03-31
- 0.1.7 — 2023-01-27
- 0.1.6 — 2023-01-18
- 0.1.5 — 2023-01-13
- 0.1.4 — 2021-11-29
- 0.1.3 — 2021-11-29
- 0.1.2 — 2021-11-28
- 0.1.1 — 2021-11-28
- 0.1.0 — 2021-11-28

## README

# Svelte Context Icons

## Installation

``` js
npm i @ayalab/svelte-context-icons 
```

## How to use

* Create icons paths config
  * You may use a library that provides svg icons paths, for example @mdi/js

    ``` js
        ./icons-config.js

        import { mdiPlus, mdiMinus } from "@mdi/js";

        const paths = {
            plus:mdiPlus,
            minus:mdiMinus
        };
    ```

  * Or you may add your svg icons paths

    ``` js
        ./icons-config.js

        const paths = {
           plus: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z",
        };
    ```

* Wrap your app with IconsProvider and add paths config to its props

    ``` js
        import { IconsProvider } from "@ayalab/svelte-context-icons";

        import { paths } from "./icons-config.js";

        <IconsProvider {paths}>
            <App/>
        </IconsProvider>
    ```

* Now in any part of your app you can use the icon component

    ``` js
        import { Icon } from "@ayalab/svelte-context-icons";

        <div>
            <Icon name="plus"/>
        </div>
    ```

* To add typescript support, you may use that workaround
  * Create .ts file with paths object like in previous example
  * In your types folder, create .d.ts file with the following content

    ``` ts
        declare module "@ayalab/svelte-context-icons" {
            import type { SvelteComponentTyped } from 'svelte';

            // Set the path to your icons config here
            declare type TPaths = keyof typeof import("./icons-config").paths;

            export type TIconName = TPaths;

            declare type TIconProps = import("@ayalab/svelte-context-icons/index").TIconProps<TPaths>;
            declare type TProviderProps = import("@ayalab/svelte-context-icons/index").TIconsProviderProps<TPaths>;

            export class Icon extends SvelteComponentTyped<TIconProps, {}, {}> {}
            export class IconsProvider extends SvelteComponentTyped<TProviderProps, {}, {}>{}
        }
    ```

---
_Source: https://npm.io/package/@ayalab/svelte-context-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._