Zest Pro
--------

500+ premium icons meticulously handcrafted and lovingly optimized for web and
mobile.

To use Zest Pro you must purchase a license throught the Zest
website, or, in the case of Open Source,
register on the Zest website.

Preview

!Zest Pro

Installation

npm install --save zest-pro

Usage

$3

All of the Zest Pro icons are available in SVG and PNG format in the images
directory of the package. Icons are organized by category and UID. You can
browse the files here.

To use the SVG files in your project, reference them like you would any other
NPM package file.

$3

Zest Pro also includes a JavaScript file that contains all of the SVG paths for
the icons. Include zest-pro.js in your project like you would any other NPM
library. If you're using Webpack with Babel this looks like this:

``javascript
import ZestIcons from 'zest-pro'
`

The API for Zest is simple. All of the icons can be referenced by UID like this:

`javascript
ZestIcons['cool-face'] / => Returns the Cool Face Emoji /
`

This returns an object for each icon that looks like this:

`javascript
{
index: 149,
uid: 'cool-face',
name: 'Cool Face',
category: 'emoji',
paths: '',
keywords: ['smile', 'cool', 'beach'],
previous: 'blowing-kiss-face',
next: 'sleeping-face'
}
`

Using this API you can construct an SVG string for an icon like this:

`javascript
var paths = ZestIcons['cool-face'].paths
var iconString = ''
`

With a bit more imagination, you can create a function for constructing icon
elements like this:

`javascript
function createIconElement(uid, options) {
if (!(uid in ZestIcons)) { throw new Error('Invalid UID for icon: ' + uid) }
var options = options || {}
var size = options.size || 24
var color = options.color || '#000'
var className = options.className || ''
var style = options.valign ? 'valign:' + options.valign : ''
var paths = ZestIcons[uid].paths
var div = document.createElement('div')
div.innerHTML = ''
return div.children[0]
}

var el = document.getElementById('example')
var icon = createIconElement('cool-face', {color: '#f09', size: 48, valign: 'middle'})
el.appendChild(icon)
`

Or, if you're using React, you can create and use an Icon component like this:

`javascript
import React from 'react'
import ZestIcons from 'zest-pro'

const Icon = ({uid, size=24, color='', valign, className}) => {
let paths
let style = {}
if (uid in ZestIcons) {
paths = ZestIcons[uid].paths
} else {
throw new Error('Invalid UID for icon: ' + uid)
}
if (valign) {
style['verticalAlign'] = valign
}
return (



)
}

const MyPage = () =>


``

License

To use Zest Pro you must purchase a license throught the Zest website.

View the complete license here.