Chapter 9: Content Template element

Core Idea

Learn how to include Lucide icons inside HTML template elements using the inTemplates option.

Key Concepts

• Example using createIcons function with template element

Code Examples

import { createIcons, Backpack } from 'lucide/dist/cjs/lucide';
import "./styles.css";

createIcons({
  icons: {
    Backpack,
  },
  inTemplates: true
});

const container = document.getElementById("container");
const template = document.getElementById("template");

const firstClone = document.importNode(template.content, true);
container.appendChild(firstClone);

const secondClone = document.importNode(template.content, true);
container.appendChild(secondClone);

• What it demonstrates: Content Template element usage pattern from the official Lucide docs.

Key Takeaways

1. Example using createIcons function with template element

Connects To

• Vanilla JS (core): part of the Vanilla JS (core) section of the Lucide docs.
• Lucide for Vanilla JavaScript: overview page for this section.