sis

stencil-inline-svg

A Stenciljs plugin to insert inline SVGs into components

Showing:

Popularity

Downloads/wk

3.7K

GitHub Stars

21

Maintenance

Last Commit

3mos ago

Contributors

3

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

stencil-inline-svg

A Stenciljs plugin to insert inline SVGs into components on build time.

Requires stenciljs version ^1.4.0 - "@stencil/core": "^1.4.0"

Installation

npm install -D stencil-inline-svg

Usage

Import the plugin on your stencil.config.ts file and add the inlineSvg function to your plugins list.

import { Config } from '@stencil/core';
import { inlineSvg } from 'stencil-inline-svg';

export const config: Config = {
  namespace: 'mycomponent',
  outputTargets: [
    { type: 'dist' },
    { type: 'docs-readme' },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
  plugins: [inlineSvg()],
};

Now, just import your file and set it as the innerHTML property of an element inside your component.

import { Component } from '@stencil/core';
import Lambo from '../../assets/img/gallardo.svg';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  render() {
    return <div class='svg-container' innerHTML={Lambo} />;
  }
}

Stenciljs - https://stenciljs.com/

Lamborghini SVG - https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/gallardo.svg

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100