Vue

@coolicons/vue has one Vue 3 component per icon, with the same entries and props as the React package.

Install

npm install @coolicons/vue

Requires Vue 3.3 or later.

Use

Toolbar.vue

<script setup>
import { House, Folder } from "@coolicons/vue";
</script>

<template>
  <nav>
    <House :size="20" />
    <Folder :stroke-width="1.5" title="Projects" />
  </nav>
</template>

Styles and corners

The entries are the same as in React. The root is Line with Regular corners.

Vue entries

Import from	Gives you
`@coolicons/vue`	Line, Regular corners
`@coolicons/vue/fill`	Fill, Regular corners
`@coolicons/vue/bulk/round`	Bulk, Round corners
`@coolicons/vue/<style>/<radius>`	Any combination

Props

Icon props

Prop	Default	What it does
`size`	`24`	Width and height. A number is pixels, a string can be any CSS length, like 1.25rem or 1em.
`strokeWidth`	`2`	Stroke width of Line, Duocolor and Duotone. Fill and Bulk have no strokes and ignore it.
`title`	none	Adds a <title> and role="img". Without a title the icon gets aria-hidden="true".

In templates, write :stroke-width or :strokeWidth. Attributes like class, style and aria-* fall through to the svg element.

Names

Names work as in React: FilePlusCorner and FilePlusCornerIcon are the same component. The same icons need the suffix, see React. To render an icon from a string, use CooliconsIcon.