Icons

OpenVolt components can be used with any icon library using the templating features.

OpenIcons #

OpenIcons is the default icon library of OpenVue with over 300 open source icons maintained by the OpenVi Foundation. OpenVolt uses the OpenIcons as Vue components instead of the font icons format to avoid importing the entire icon suite assets including the font files and styles. For example ChevronDown component is used instead of pi pi-chevron-down.

An icon is customized with templating, example below changes the dropdown icon of a Select in @/volt/select/index.vue.


<template #dropdownicon>
    <ArrowDownIcon class="text-primary"/>
</template>


import ArrowDownIcon from '@openvue/icons/arrowdown';

Material #

Material icons is the official icon library based on Google Material Design.


<template #dropdownicon>
    <span class="material-icons">arrow_drop_down</span>
</template>

FontAwesome #

Font Awesome is a popular icon library with a wide range of icons.


<template #dropdownicon>
    <i class="fa-light fa-chevron-down"></i>
</template>

SVG #

Inline SVGs embedded within the component.


<template #dropdownicon>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <g id="chevron-down">
            <path d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z"/>
        </g>
    </svg>
</template>

Image #

Any type of image can be used as an icon.


<template #dropdownicon>
    <template #dropdownicon>
        <img alt="dropdown icon" src="/assets/icons/arrow_down.png">
    </template>
</template>