@yrobot/svg-inline
A web component which load static svg file form uri to inline svg
<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
svg-inline
load There are 2 ways to load svg-inline
:
- NPM
- install package: run
yarn add @yrobot/svg-inline
ornpm install @yrobot/svg-inline
- import package:
import '@yrobot/svg-inline'
- CDN
- import script in html:
<script src="https://unpkg.com/@yrobot/svg-inline@latest/build/index.js" type='module'></script>
svg-inline
to load svg file
use <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
display
, width
and height
for svg-inline, to avoid the page reflow.
1. set a specific 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