obra-icons-vue

obra-icons-vue

Obra Icons for Vue.

A simple, consistent set of icons, perfect for user interfaces. Obra Icons consists of more than 1000 icons.

Installation

npm install -D obra-icons-vue

This package works with Vue 2 and 3.

Usage example

<script setup>
	import { IconAdd } from 'obra-icons-vue';
</script>

<template>
    <IconAdd :size="48" color="mediumseagreen" :strokeWidth="1"/>
</template>

Every icon is also available on its own subpath, which skips the barrel entirely and keeps dev servers from processing all ~1000 icon components:

<script setup>
	import IconAdd from 'obra-icons-vue/icons/Add';
</script>

Subpath imports give you the component under its bare name (Add) rather than the prefixed barrel export (IconAdd), so name the local binding yourself.

As you can see, you can use the size, color and strokeWidth props to customize the icon.

Targeting with CSS

Every SVG contains an obra-icon class on the top level SVG element, that you can target with CSS.

Next to this, the inner elements are also targetable, with the following class names:

• oi-fill: Fill layers
• oi-vector: Vector layers
• oi-ellipse: Ellipse layers
• oi-box: Box layers
• oi-triangle: Triangle layers
• oi-incomplete-triangle: Incomplete triangle layers
• oi-mini-square: Mini square layers
• oi-line: Line layers
• oi-mini-dot: Mini dots
• oi-medium-dot: Medium dots
• oi-dot: Regular dots

Which icons are available?

For a full reference, see the list at Obra Icons website.

Running the demo

• clone this repo
• cd into this directory
• run pnpm i
• run pnpm dev to start the dev server
• open the URL it outputs in your browser