Jump to: navigation, search
(Created target blank page For Version: PSAAS:Public)
 
(Update with the copy of version: draft)
Line 1: Line 1:
−
<!-- Creation of the target page -->
+
= Icons =
 +
 
 +
Genesys Widgets includes SVG icons for use in widgets or custom extensions.
 +
 
 +
== How to use icons ==
 +
 
 +
=== Automatic HTML Injection ===
 +
 
 +
By applying the CSS class "cx-icon" and the attribute "data-icon" to an element, you can specify which icons you want and where.
 +
 
 +
'''Example:'''
 +
 
 +
<nowiki>
 +
<div id="your-element" class="cx-icon" data-icon="chat">
 +
    ...SVG icon will be inserted here
 +
</div>
 +
</nowiki>
 +
 
 +
You then pass your element as a jquery wrapped set or HTML string into the <tt>CXCommon.populateAllPlaceholders( $("#your-element") )</tt> function, Widgets will insert the appropriate SVG icons into each specified element and return the HTML to you.
 +
 
 +
=== Fetching SVG Icon Markup ===
 +
 
 +
You can also fetch the markup for each SVG icon manually.
 +
 
 +
'''Example:'''
 +
 
 +
<nowiki>
 +
$("#your-element").append( CXCommon.Generate.Icon("chat") );
 +
</nowiki>
 +
 
 +
== Multi-tone ==
 +
[[File:Multi-icon-set1.png|600px]]
 +
[[File:Multi-icon-set2.png|600px]]
 +
[[File:Multi-icon-set3.png|600px]]
 +
 
 +
== Outline ==
 +
[[File:Outline-icon-set1.png|600px]]
 +
[[File:Outline-icon-set2.png|600px]]
 +
[[File:Outline-icon-set3.png|600px]]
 +
 
 +
[[Category:V:PSAAS:Public]]

Revision as of 19:48, September 18, 2017

Icons

Genesys Widgets includes SVG icons for use in widgets or custom extensions.

How to use icons

Automatic HTML Injection

By applying the CSS class "cx-icon" and the attribute "data-icon" to an element, you can specify which icons you want and where.

Example:

<div id="your-element" class="cx-icon" data-icon="chat"> ...SVG icon will be inserted here </div>

You then pass your element as a jquery wrapped set or HTML string into the CXCommon.populateAllPlaceholders( $("#your-element") ) function, Widgets will insert the appropriate SVG icons into each specified element and return the HTML to you.

Fetching SVG Icon Markup

You can also fetch the markup for each SVG icon manually.

Example:

$("#your-element").append( CXCommon.Generate.Icon("chat") );

Multi-tone

Multi-icon-set1.png Multi-icon-set2.png Multi-icon-set3.png

Outline

Outline-icon-set1.png Outline-icon-set2.png Outline-icon-set3.png

Comments or questions about this documentation? Contact us for support!