0.3.0 • Published 2 months ago
@ayalab/svelte-context-icons v0.3.0
Svelte Context Icons
Installation
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
./icons-config.js import { mdiPlus, mdiMinus } from "@mdi/js"; const paths = { plus:mdiPlus, minus:mdiMinus };
Or you may add your svg icons paths
./icons-config.js const paths = { plus: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", };
Wrap your app with IconsProvider and add paths config to its props
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
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
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, {}, {}>{} }