Stencil Lucide

Lucide icons as StencilJS components.

Installation

There are three strategies we recommend for using web components built with Stencil.

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/st-lucide@latest/dist/st-lucide/st-lucide.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html lucide

Node Modules

• Run npm install st-lucide --save
• Put a script tag similar to this <script src='node_modules/st-lucide/dist/st-lucide/st-lucide.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install st-lucide --save
• Add an import to the npm packages import st-lucide;
• Then you can use the element anywhere in your template, JSX, html etc

Usage

Icons can be used as web components, by prefixing the name of the icon with icon-. See lucide.dev for a complete list of icons.

<icon-activity />

Any attributes will be forwarded to the lucide svg icon.

<icon-activity stroke-width="1" color="red" />