lion-icons v1.0.2
Lionicons
What is Lionicons?
Lionicons is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.
npm install lion-icons
Table of Contents
- Quick Start
- Usage
- API Reference
lion.icons
lion.icons[name].toSvg()
lion.replace()
(DEPRECATED)lion.toSvg()
- Contributing
- Related Projects
- License
Quick Start
Start with this CodePen Template to begin prototyping with lion in the browser.
Or copy and paste the following code snippet into a blank html
file.
<!DOCTYPE html>
<html lang="en">
<title></title>
<script src="https://unpkg.com/lion-icons"></script>
<body>
<!-- example icon -->
<i data-lion="circle"></i>
<script>
lion.replace()
</script>
</body>
</html>
Usage
At its core, lion is a collection of SVG files. This means that you can use lion icons in all the same ways you can use SVGs (e.g. img
, background-image
, inline
, object
, embed
, iframe
). Here's a helpful article detailing the many ways SVGs can be used on the web: SVG on the Web – Implementation Options
The following are additional ways you can use lion.
Client-side JavaScript
1. Install
Note: If you intend to use lion with a CDN, you can skip this installation step.
Install with npm.
npm install lion-icons --save
Or just copy lion.js
or lion.min.js
into your project directory. You don't need both lion.js
and lion.min.js
.
2. Include
Include lion.js
or lion.min.js
with a <script>
tag:
<script src="path/to/dist/lion.js"></script>
Note:
lion.js
andlion.min.js
are located in thedist
directory of the npm package.
Or load the script from a CDN provider:
<!-- choose one -->
<script src="https://unpkg.com/lion-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/lion-icons/dist/lion.min.js"></script>
After including the script, lion
will be available as a global variable.
3. Use
To use an icon on your page, add a data-lion
attribute with the icon name to an element:
<i data-lion="circle"></i>
See the complete list of icons at lionicons.github.io.
4. Replace
Call the lion.replace()
method:
<script>
lion.replace()
</script>
All elements that have a data-lion
attribute will be replaced with SVG markup corresponding to their data-lion
attribute value. See the API Reference for more information about lion.replace()
.
Node
1. Install
Install with npm:
npm install lion-icons --save
2. Require
const lion = require('lion-icons')
3. Use
lion.icons.x
// {
// name: 'x',
// contents: '<line ... /><line ... />`,
// tags: ['cancel', 'close', 'delete', 'remove'],
// attrs: {
// class: 'lion lion-x',
// xmlns: 'http://www.w3.org/2000/svg',
// width: 24,
// height: 24,
// viewBox: '0 0 24 24',
// fill: 'none',
// stroke: 'currentColor',
// 'stroke-width': 2,
// 'stroke-linecap': 'round',
// 'stroke-linejoin': 'round',
// },
// toSvg: [Function],
// }
lion.icons.x.toSvg()
// <svg class="lion lion-x" ...><line ... /><line ... /></svg>
lion.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' })
// <svg class="lion lion-x foo bar" stroke-width="1" color="red" ...><line ... /><line ... /></svg>
See the API Reference for more information about the available properties and methods of the lion
object.
SVG Sprite
1. Install
Note: If you intend to use lion with a CDN, you can skip this installation step.
Install with npm.
npm install lion-icons --save
Or just copy lion-sprite.svg
into your project directory.
2. Use
Include an icon on your page with the following markup:
<svg
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<use xlink:href="path/to/lion-sprite.svg#circle"/>
</svg>
Note:
circle
in the above example can be replaced with any valid icon name. See the complete list of icon names at lionicons.github.io.
However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:
.lion {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
<svg class="lion">
<use xlink:href="path/to/dist/lion-sprite.svg#circle"/>
</svg>
Figma
lion is available as a Figma component library. To use the components, log in to your Figma account and duplicate the file to your drafts.
API Reference
lion.icons
An object with data about every icon.
Usage
lion.icons.x
// {
// name: 'x',
// contents: '<line ... /><line ... />',
// tags: ['cancel', 'close', 'delete', 'remove'],
// attrs: {
// class: 'lion lion-x',
// xmlns: 'http://www.w3.org/2000/svg',
// width: 24,
// height: 24,
// viewBox: '0 0 24 24',
// fill: 'none',
// stroke: 'currentColor',
// 'stroke-width': 2,
// 'stroke-linecap': 'round',
// 'stroke-linejoin': 'round',
// },
// toSvg: [Function],
// }
lion.icons.x.toString()
// '<line ... /><line ... />'
Note:
x
in the above example can be replaced with any valid icon name. See the complete list of icon names at lionicons.github.io. Icons with multi-word names (e.g.arrow-right
) cannot be accessed using dot notation (e.g.lion.icons.x
). Instead, use bracket notation (e.g.lion.icons['arrow-right']
).
lion.icons[name].toSvg([attrs])
Returns an SVG string.
Parameters
Name | Type | Description |
---|---|---|
attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar" ). All default attributes on the <svg> tag can be overridden with the attrs object. |
Hint: You might find these SVG attributes helpful for manipulating icons:
Usage
lion.icons.circle.toSvg()
// '<svg class="lion lion-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
lion.icons.circle.toSvg({ 'stroke-width': 1 })
// '<svg class="lion lion-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
lion.icons.circle.toSvg({ class: 'foo bar' })
// '<svg class="lion lion-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
lion.replace([attrs])
Replaces all elements that have a data-lion
attribute with SVG markup corresponding to the element's data-lion
attribute value.
Parameters
Name | Type | Description |
---|---|---|
attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar" ). All default attributes on the <svg> tag can be overridden with the attrs object. |
Usage
Note:
lion.replace()
only works in a browser environment.
Simple usage:
<i data-lion="circle"></i>
<!--
<i> will be replaced with:
<svg class="lion lion-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->
<script>
lion.replace()
</script>
You can pass lion.replace()
an attrs
object:
<i data-lion="circle"></i>
<!--
<i> will be replaced with:
<svg class="lion lion-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->
<script>
lion.replace({ class: 'foo bar', 'stroke-width': 1 })
</script>
All attributes on the placeholder element (i.e. <i>
) will be copied to the <svg>
tag:
<i data-lion="circle" id="my-circle" class="foo bar" stroke-width="1"></i>
<!--
<i> will be replaced with:
<svg id="my-circle" class="lion lion-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->
<script>
lion.replace()
</script>
(DEPRECATED) lion.toSvg(name, [attrs])
Note:
lion.toSvg()
is deprecated. Please uselion.icons[name].toSvg()
instead.
Returns an SVG string.
Parameters
Name | Type | Description |
---|---|---|
name | string | Icon name |
attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar" ). All default attributes on the <svg> tag can be overridden with the attrs object. |
Usage
lion.toSvg('circle')
// '<svg class="lion lion-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
lion.toSvg('circle', { 'stroke-width': 1 })
// '<svg class="lion lion-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
lion.toSvg('circle', { class: 'foo bar' })
// '<svg class="lion lion-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
Contributing
For more info on how to contribute please see the contribution guidelines.
Caught a mistake or want to contribute to the documentation? Edit this page on Github
License
Lion is licensed under the MIT License.