react-inlinesvg

  • Version 4.3.0
  • Published
  • 189 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 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>