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 three popular SVG icon libraries:

• @material-symbols (icon list)

• bootstrap-icons (icon list)

• heroicons (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

yarn

# weight from 100 to 700 available
yarn add @material-symbols/svg-500
# or
yarn add bootstrap-icons
# or
yarn add heroicons

pnpm

# weight from 100 to 700 available
pnpm add @material-symbols/svg-500
# or
pnpm add bootstrap-icons
# or
pnpm add heroicons

bun

# weight from 100 to 700 available
bun add @material-symbols/svg-500
# or
bun add bootstrap-icons
# or
bun add heroicons

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

vueless.config.js

export default {
  component: {
    UIcon: {
      defaults: {
        library: "bootstrap-icons",
      }
    }
  }
};

heroicons

vueless.config.js

export default {
  component: {
    UIcon: {
      defaults: {
        library: "heroicons",
      }
    }
  }
};

3. Use the SVG icon anywhere in the project.

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

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