Description
Icons are a visual representation of an idea and/or action.
Lexicon Icons
We use SVG elements that link to an SVG sprite. See the example below:
{call ClayIcon.render}
{param spritemap: 'path/to/icons.svg' /}
{param symbol: 'add-column' /}
{/call}
{call ClayIcon.render}
{param spritemap: 'path/to/icons.svg' /}
{param symbol: 'add-cell' /}
{/call}<clay-icon spritemap="path/to/icons.svg" symbol="add-column"></clay-icon>
<clay-icon spritemap="path/to/icons.svg" symbol="add-cell"></clay-icon><svg class="lexicon-icon">
<use href="path/to/icons.svg#add-column" />
</svg>Note that the ID after the # symbol is the ID of the icon to use. For example, if you wanted to use the plus icon, you would specify the following path:
path/to/icons.svg#plus. See the example below:
Language Flags
People tend to have pretty strong opinions on whether flags should be used as a visual cue for indicating a language, mainly because in many parts of the world the flag may have cultural and geographic meanings that we might not be aware of, or the flag itself isn't fully accurate to the dialects spoken in that region.
While we understand this reasoning, we've found that when a user is not familiar with the currently displayed language, flags somewhat eliminate the use of other mechanisms, such as the name of the language (since the current language could be in an entirely different character set). Given this, there is often at least some familiarity with the identity of a country that speaks a shared language.
Or, to paraphrase Winston Churchill, "Using flags is the worst system for indicating language, except for all others". :)
To use the flags below, follow the same process as you would for a standard icon, and use the locale and country code indicated in parenthesis for the icon's name (e.g. to use the Japanese icon, you would use
ja-jp)
SVG Icons as Background Images
We have created a Sass function to turn Lexicon SVG icon's into data uri schemes, which enables you to use them as a background images on an HTML element. The Sass function
clay-icon(icon-name, color)takes the name of a Lexicon SVG Icon and a color. For example, the Sass rule set.site-add-cell { background-image: clay-icon(add-cell, #5AF); background-size: contain; display: inline-block; height: 20px; width: 20px; }will place the SVG icon add-cell as a background-image on any element with class site-add-cell.
add-cell add-column add-row adjust align-center asterisk times-circle workflow
Clay-svg-url()
You can turn your custom SVG into a data uri using the Sass function
clay-svg-url($svg), where$svgis the code for your inline SVG. The function returnsurl(your_svg_as_data_uri).
Linux Tux
Why do we use SVG?
Font icons, while fairly simple, suffer drawbacks, such as sub-pixel aliasing. This results in a lower quality than we would like. SVG gives us and you a greater amount of freedom in styling the icons, as well as a higher level of fidelity and clarity in the icons. Also, SVG supports multi-color icons, as shown below: