INTEGRATION.md

SVG Icon Sprite - Web Component

Integration Examples

First, add the lib to your node-modules and package.json.

React

When using a module loader like Webpack (i.e. with a React), import the web component via the import statement and then invoke it in your template (HTML, JSX etc.)

import 'svg-icon-sprite';

class MyClass extends React.Component {
  render() {
    return (
      <svg-icon
          src="assets/sprites/sprite.svg#blender"
          width="50px"
          height="50px"
          classes="foo bar"
      ></svg-icon>
    )
  }
}

A thorough React example you will find on codesandbox

Next.js

If you use server side rendering, i.e. in combination with Next.js, you'll have to dynamically import svg-icon-sprite from node modules. Following example shows the integration into the _app.jsx using functional component syntax.

const App = props => {
  useEffect(() => {
    import('svg-icon-sprite');
  }, []);
}

From now on you can invoke svg-icon in all subcomponents. Explanation: here useEffect is only executed during CSR because Webcomponents cannot be invoked during SSR.

Angular

In order to use Web Components in Angular, you must fist add CUSTOM_ELEMENTS_SCHEMA in app.module.ts

@NgModule({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Then import svg-icon-sprite inside of the component (.ts file)

import 'svg-icon-sprite';

Now you can use the svg-icon tag inside your template (.html file)

<svg-icon src="assets/sprites/sprite.svg#bunsen-burner"></svg-icon>

See the full example on codesandbox

Author & License

• Jan Suwart | MIT License