react-inlinesvg

  • Version 4.4.1
  • Published
  • 192 kB
  • 1 dependency
  • MIT license

Install

npm i react-inlinesvg
yarn add react-inlinesvg
pnpm add react-inlinesvg

Overview

An SVG loader for React

Index

Variables

variable cacheStore

const cacheStore: CacheStore;

    Functions

    function InlineSVG

    InlineSVG: typeof InlineSVG;

      function InlineSVG

      InlineSVG: typeof InlineSVG;

        Interfaces

        interface FetchError

        interface FetchError extends Error {}

          property code

          code: string;

            property errno

            errno: string;

              property message

              message: string;

                property type

                type: string;

                  interface State

                  interface State {}

                    property content

                    content: string;

                      property element

                      element: ReactNode;

                        property isCached

                        isCached: boolean;

                          property status

                          status: Status;

                            interface StorageItem

                            interface StorageItem {}

                              property content

                              content: string;

                                property error

                                error?: Error;

                                  property status

                                  status: Status;

                                    Type Aliases

                                    type ErrorCallback

                                    type ErrorCallback = (error: Error | FetchError) => void;
                                    • Called when loading the SVG fails.

                                    type LoadCallback

                                    type LoadCallback = (src: string, isCached: boolean) => void;
                                    • Called when the SVG loads successfully.

                                    type PreProcessorCallback

                                    type PreProcessorCallback = (code: string) => string;
                                    • Pre-processes the SVG string before parsing. Must return a string.

                                    type Props

                                    type Props = Simplify<
                                    Omit<SVGProps<SVGElement>, 'onLoad' | 'onError' | 'ref'> & {
                                    /**
                                    * A URL to prepend to url() references inside the SVG when using `uniquifyIDs`.
                                    * Only required if your page uses an HTML `<base>` tag.
                                    */
                                    baseURL?: string;
                                    /**
                                    * Cache remote SVGs in memory.
                                    *
                                    * When used with the CacheProvider, requests are also persisted in the browser cache.
                                    * @default true
                                    */
                                    cacheRequests?: boolean;
                                    /**
                                    * Fallback content rendered on fetch error or unsupported browser.
                                    */
                                    children?: ReactNode;
                                    /**
                                    * A description for the SVG.
                                    * Overrides an existing `<desc>` tag.
                                    */
                                    description?: string;
                                    /**
                                    * Custom options for the fetch request.
                                    */
                                    fetchOptions?: RequestInit;
                                    /**
                                    * A ref to the rendered SVG element.
                                    * Not available on initial render — use `onLoad` instead.
                                    */
                                    innerRef?: Ref<SVGElement | null>;
                                    /**
                                    * A component shown while the SVG is loading.
                                    */
                                    loader?: ReactNode;
                                    /**
                                    * Called when loading the SVG fails.
                                    * Receives an `Error` or `FetchError`.
                                    */
                                    onError?: ErrorCallback;
                                    /**
                                    * Called when the SVG loads successfully.
                                    * Receives the `src` and an `isCached` flag.
                                    */
                                    onLoad?: LoadCallback;
                                    /**
                                    * A function to pre-process the SVG string before parsing.
                                    * Must return a string.
                                    */
                                    preProcessor?: PreProcessorCallback;
                                    /**
                                    * The SVG to load.
                                    * Accepts a URL or path, a data URI (base64 or URL-encoded), or a raw SVG string.
                                    */
                                    src: string;
                                    /**
                                    * A title for the SVG. Overrides an existing `<title>` tag.
                                    * Pass `null` to remove it.
                                    */
                                    title?: string | null;
                                    /**
                                    * A string to use with `uniquifyIDs`.
                                    * @default random 8-character alphanumeric string
                                    */
                                    uniqueHash?: string;
                                    /**
                                    * Create unique IDs for each icon.
                                    * @default false
                                    */
                                    uniquifyIDs?: boolean;
                                    }
                                    >;

                                      type Simplify

                                      type Simplify<T> = {
                                      [KeyType in keyof T]: T[KeyType];
                                      } & {};

                                        type Status

                                        type Status = (typeof STATUS)[keyof typeof STATUS];

                                          Package Files (2)

                                          Dependencies (1)

                                          Dev Dependencies (31)

                                          Peer Dependencies (1)

                                          Badge

                                          To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                          You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-inlinesvg.

                                          • Markdown
                                            [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-inlinesvg)
                                          • HTML
                                            <a href="https://www.jsdocs.io/package/react-inlinesvg"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>