svg-icon-vue

Template for compiling SVG Icons as a Vue Component

TL;DR

git clone
cd <repo directory>
npm i
# add svg resources to src/icons
npm run build
# /dist now contains production-ready js

<svg-icon
	name="icon-name"
	title="Icon Title"
	color="#ff8200"
	size="32"/>

<svg-icon
	name="custom-icon"
	title="Custom Title Text"
	color="#f00"
	:size="[64, 32]"
	viewBox="0 0 64 32">
	<path d="M731.429 799.429c0..."></path>
</svg-icon>

Installation

For use without a build process, just place the script tag directly into the HTML page, after Vue itself has loaded. Use the svg-icon.min.js file directly in the browser, it will auto-register with Vue.

<script src="//your.website.com/js/svg-icon.min.js"></script>

For use in Vue apps with a build process, copy the resources from the dist folder into your project (app/src/icons/ for example). Then register the package in the bootstrap process of the app via Vue.use for global availability, or in the components attribute of an existing component to limit its use.

// --- app/src/main.js
import svgIcon from './icons/svg-icon.esm.js';

Vue.use(svgIcon);

Usage

svg-icon renders icons as inline svg to the page. By default, all the icons are 32px square, and inherit the color from their current context (eg. link-colored in a link, heading-colored in a heading, etc.)

To specify the icon you wish to display, supply the name attribute. If it matches the name of an icon in the set, that icon will be displayed.

<svg-icon name="icon-name"/>

If name is not provided, or does not match one in the set, it is assumed you are providing your own svg content.

<svg-icon name="custom-icon"><path d="M731.429 799.429c0..."></path></svg-icon>

Additional properties are as follows:

• title: A boolean will enable/disable default hover text. A string will set custom hover text.
• size: A single number/string will render a square icon of that size. An array of two numbers/strings of the format [width, height] will display the icon accordingly.
• color: An hex color representation will change the base color of the icon. If a multicolor icon is provided, it will set the color where no other color has been specified.

Any other properties not specified (eg. viewBox, etc.) will be appended directly to the SVG tag generated by the component.

Examples

The repository for this component contains an example file, examples/icon-grid.vue, which serves both as a catalog of the library's icons, as well as a playground to test sizing/coloring of the icons.