vue-svg-custom-icon
A lightweight component with no dependecy to allow use of custom SVG icons in your Vue.js application based on SVG sprite.
Installation
Using NPM:
npm install vue-svg-custom-icon --save
Requirements
- Vue.js (2.x+)
- svgxuse polyfill to support IE9-11 version
- SVG sprite file that should be available in "/static" folder by default (can be changed, more details in configuration section)
TIP: you can use create-svg-sprite package to create SVG sprite with no build configuration based on SVG files from given folder.
Usage
In your main.js file:
Vue
In your components:
- name - SVG sprite symbol id value (note below)
- size - icon size in px (16 is default)
NOTE: Assuming your SVG sprite looks like below:
<!-- SVG sprite example -->
<!-- Alarm icon usage based on above SVG sprite -->
Configuration
By default, <svg-icon> component will look for SVG sprite in "/static" folder. Provide "basePath" options to change the default path:
Vue