@yrobot/svg-inline NPM

<svg-inline src="https://example.com/example.svg"></svg-inline>

<svg-inline src="https://example.com/example.svg">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="128"
    height="128"
    viewBox="0 0 128 128"
  >
    <path d="..."></path>
  </svg>
</svg-inline>

Demos

Pure HTML

How To Start

load `svg-inline`

There are 2 ways to load svg-inline:

install package: run yarn add @yrobot/svg-inline or npm install @yrobot/svg-inline
import package: import '@yrobot/svg-inline'

import script in html: <script src="https://unpkg.com/@yrobot/svg-inline@latest/build/index.js" type='module'></script>

use `svg-inline` to load svg file

<svg-inline src="https://example.com/svg/example.svg"></svg-inline>

Props

Prop	Type	Description
src	string	the url of svg file, complete url or relative/absolute path.
class	string	the css class name list string, you could change inline svg display size here. Notice the default web component display value is inline.

Common Usages

With TypeScript

import React from "react";
import { InlineSVGElement } from "@yrobot/svg-inline";

export default function Icon({
  icon = "",
  className = "",
  ...props
}: { icon: string; className?: string } & Omit<
  InlineSVGElement,
  "src" | "class"
>) {
  return (
    <svg-inline
      {...props}
      class={`inline-block ${className}`}
      src={`/icons/${icon}.svg`}
    ></svg-inline>
  );
}

With Next.js

import React, { useEffect } from "react";
import { InlineSVGElement } from "@yrobot/svg-inline";

export default function Icon({
  icon = "",
  className = "",
  ...props
}: { icon: string; className?: string } & Omit<
  InlineSVGElement,
  "src" | "class"
>) {
  useEffect(() => {
    import("@yrobot/svg-inline"); // avoid load svg-inline in SSR
  }, []);
  return (
    <svg-inline
      {...props}
      class={`inline-block ${className}`}
      src={`/icons/${icon}.svg`}
    ></svg-inline>
  );
}

or import the web component and register it:

import InlineSVG from "@yrobot/svg-inline";

if (typeof window !== "undefined") {
  window.customElements.define("svg-inline", InlineSVG);
}

Suggestions

1. set a specific `display`, `width` and `height` for svg-inline, to avoid the page reflow.

The default display value for web component is inline. You could read more about this here.

And same as the img tag, if the svg-inline added without with and height, the page will reflow after the svg loaded.

So for the optimization, if you want to set the size of svg-inline, you should set the display as inline-block or block first, then set the width and height manually.

And here is the reason why i could not set this for you. web component 在 SRR 的情况下会导致页面回流

Todo

loading status handler
error status handler

History

Version 1.2.4

Fix Bug: Failed to execute 'define' on 'CustomElementRegistry': the name "svg-inline" has already been used with this registry
- add checker before the customElements.define