General usage

Vueless supports the dynamic import of SVG icons, so you don’t need to explicitly import them. Simply set the icon name in the component, and you’ll get perfectly optimized SVG icons in your project.

---

Vueless comes with built-in support for four popular SVG icon libraries:

• @material-symbols (icon list)

• bootstrap-icons (icon list)

• heroicons (icon list)

• lucide-static (icon list)

1. Install the desired icon library package.

npm

# weight from 100 to 700 is available
npm install @material-symbols/svg-500
# or
npm install bootstrap-icons
# or
npm install heroicons
# or
npm install lucide-static

yarn

pnpm

bun

2. Define the icon library inside the defaults key of the UIcon component configuration.

@material-symbols/svg-500

vueless.config.js

export default {
  component: {
    UIcon: {
      defaults: {
        library: "@material-symbols/svg-500",
        style: "outlined", // sharp | rounded | outlined
      }
    }
  }
};

bootstrap-icons

heroicons

lucide-static

3. Use the SVG icon anywhere in the project.

<!-- Outlined version -->
<UIcon name="settings" />

<!-- Solid / Filled version -->
<UIcon name="settings-fill" />