@yrobot/svg-inline
TypeScript icon, indicating that this package has built-in type declarations

1.2.5 • Public • Published

svg-inline logo


@yrobot/svg-inline

A web component which load static svg file form uri to inline svg

npm package


<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

How To Start

load svg-inline

There are 2 ways to load svg-inline:

  1. NPM
  • install package: run yarn add @yrobot/svg-inline or npm install @yrobot/svg-inline
  • import package: import '@yrobot/svg-inline'
  1. CDN
  • 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

Version 1.2.2

  • update attributes listener logic by using attributeChangedCallback

Version 1.2.0

  • remove default style set for svg-inline. (notice: the default style for web component is display: inline;)

Version 1.1.0

  • add observer on svg-inline.src
  • fix svg-inline is empty in react

Version 1.0.4

  • update *.d.ts
  • update README for TypeScript, Next.js Usages

Version 1.0.3

  • add basic typescript declare: *.d.ts

Version 1.0.0

  • basic feature
  • support src prop
  • generate viewBox if not exist

Package Sidebar

Install

npm i @yrobot/svg-inline

Weekly Downloads

16

Version

1.2.5

License

ISC

Unpacked Size

8.88 kB

Total Files

5

Last publish

Collaborators

  • yrobot