DEV Community

Cover image for Add custom icons to Vue Unicons
Anton Reshetov
Anton Reshetov

Posted on

Add custom icons to Vue Unicons

Vue Unicons is a 1000+ Pixel-perfect svg unicons as Vue components.

But if an icon is missing it's not a problem. You can add custom svg icons.

custom-icons.js

// Always use a prefix to avoid coincidence with existing icons.
export const myCustomIcon = {
  name: 'my-custom-icon',
  path: '<path d="M16.327 10.775a.312.312 0 0...</path>' // Copy everything inside the svg tag of the icon you want and past there
}
Enter fullscreen mode Exit fullscreen mode

For correct positioning of svg icon please make sure that the icon to be added has viewBox="0 0 X X"

main.js

import Vue from 'vue'
import App from './App.vue'
import Unicon from 'vue-unicons'
import { uniConstructor, uniCarWash } from 'vue-unicons/src/icons'
import { myCustomIcon } from './custom-icons'

Unicon.add([uniConstructor, uniCarWash, myCustomIcon])
Vue.use(Unicon)

new Vue({
  render: h => h(App)
}).$mount('#app')
Enter fullscreen mode Exit fullscreen mode

App.vue

<template>
  <unicon name="constructor" fill="royalblue"></unicon>
  <unicon name="car-wash" fill="limegreen"></unicon>
  <unicon name="my-custom-icon" fill="royalblue" />
</template>
Enter fullscreen mode Exit fullscreen mode

GitHub logo antonreshetov / vue-unicons

1000+ Pixel-perfect svg icons for your next project as Vue components

logo of vue-unicons repository

1000+ Pixel-perfect svg unicons for your next project as Vue components

Supporting

Vue Unicons is open source project and completely free to use.

If you like the project, you can donate to support the development via the following methods:

Donate via Patreon Donate via PayPal Donate via Bitcoin

Demo

https://antonreshetov.github.io/vue-unicons

Developed with love for developers

A simple way to add the necessary icons and install them.

demo

Install

NPM

Installing with npm is recommended and it works seamlessly with webpack.

npm i vue-unicons
Enter fullscreen mode Exit fullscreen mode

Download

You can download latest version from the Github: Download

Quick start

Global

To use in your project:

  1. Import vue-unicons
  2. Grab the icons you want and add then into Unicon library
  3. Install Unicon into Vue

main.js

Vue 3

import { createApp } from 'vue'
import App from './App.vue'
import Unicon from 'vue-unicons'
import { uniLayerGroupMonochrome, uniCarWash } from 'vue-unicons/dist/icons'
Unicon.add([uniLayerGroupMonochrome, uniCarWash])

createApp(App).
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
panditapan profile image
Pandita

I totally read "Add custom icon to DEV Unicorn" and I was like WHY WOULD I CHANGE THE UNICORN?! all flabbergasted hahahaha

Anyway, thanks for the article! Will be saving it as a resource :3

Collapse
 
antonreshetov profile image
Anton Reshetov

That's funny 😆