Sailor

What is sailor?

Sailor is a collection of nice open source icons. Each icon is designed with an emphasis on simplicity, consistency and usability.

npm install sailor-icons --save

Quick Start

Copy and paste the following code snippet into a blank html file.

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/sailor-icons"></script>
  <body>

    <!-- example icon -->
    <i data-sailor="anchor"></i>

    <script>
      sailor.replace()
    </script>
  </body>
</html>

Usage

At its core, Sailor is a collection of SVG files. This means that you can use Sailor 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 Sailor.

Client-side JavaScript

1. Install

Note: If you intend to use Sailor with a CDN, you can skip this installation step.

Install with npm.

npm install sailor-icons --save

Or just copy sailor.js or sailor.min.js into your project directory. You don't need both sailor.js and sailor.min.js.

2. Include

Include sailor.js or sailor.min.js with a <script> tag:

<script src="path/to/dist/sailor.js"></script>

Note: sailor.js and sailor.min.js are located in the dist directory of the npm package.

Or load the script from a CDN provider:

<!-- choose one -->
<script src="https://unpkg.com/sailor-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/sailor-icons/dist/sailor.min.js"></script>

After including the script, sailor will be available as a global variable.

3. Use

To use an icon on your page, add a data-sailor attribute with the icon name to an element:

<i data-sailor="anchor"></i>

See the complete list of icons at sailoricons.com.

4. Replace

Call the sailor.replace() method:

<script>
  sailor.replace()
</script>

All elements that have a data-sailor attribute will be replaced with SVG markup corresponding to their data-sailor attribute value. See the API Reference for more information about sailor.replace().

Node

1. Install

Install with npm:

npm install sailor-icons --save

2. Require

const sailor = require('sailor-icons')

3. Use

sailor.icons.x
// {
//    name: 'x',
//    contents: '<line ... /><line ... />`,
//    tags: ['cancel', 'close', 'delete', 'remove'],
//    attrs: {
//      class: 'sailor sailor-x',
//      xmlns: 'http://www.w3.org/2000/svg',
//      width: 24,
//      height: 24,
//      viewBox: '0 0 24 24',
//    },
//    toSvg: [Function],
// }

sailor.icons.x.toSvg()
// <svg class="sailor sailor-x" ...><line ... /><line ... /></svg>

sailor.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' })
// <svg class="sailor sailor-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 sailor object.

SVG Sprite

1. Install

Note: If you intend to use sailor with a CDN, you can skip this installation step.

Install with npm.

npm install sailor-icons --save

Or just copy sailor-sprite.svg into your project directory.

2. Use

Include an icon on your page with the following markup:

<svg
  width="24"
  height="24"
>
  <use xlink:href="path/to/sailor-sprite.svg#anchor"/>
</svg>

Note: anchor in the above example can be replaced with any valid icon name. See the complete list of icon names at sailoricons.com.

However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:

.sailor {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

<svg class="sailor">
  <use xlink:href="path/to/dist/sailor-sprite.svg#anchor"/>
</svg>

API Reference

`sailor.icons`

An object with data about every icon.

Usage

sailor.icons.x
// {
//    name: 'x',
//    contents: '<line ... /><line ... />',
//    attrs: {
//      class: 'sailor sailor-x',
//      xmlns: 'http://www.w3.org/2000/svg',
//      width: 24,
//      height: 24,
//      viewBox: '0 0 24 24',
//    },
//    toSvg: [Function],
// }

sailor.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 sailoricons.com. Icons with multi-word names (e.g. sound-on) cannot be accessed using dot notation (e.g. sailor.icons.x). Instead, use bracket notation (e.g. sailor.icons['sound-on']).

View Source

`sailor.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:

color

width

height

stroke-width

stroke-linecap

stroke-linejoin

Usage

sailor.icons.anchor.toSvg()
// <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="sailor sailor-anchor"><path d="M12 4.73a.94.94 0 0 1 1 .89 1 1 0 0 1-2 0 .94.94 0 0 1 1-.89M12 4a1.7 1.7 0 0 0-1.76 1.62A1.69 1.69 0 0 0 12 7.23a1.69 1.69 0 0 0 1.77-1.61A1.7 1.7 0 0 0 12 4z"></path><path d="M12 18.87a.75.75 0 0 1-.78-.73V7.47a.78.78 0 0 1 1.56 0v10.67a.75.75 0 0 1-.78.73z"></path><path d="M12 20c-3.08 0-5.58-1.92-5.58-4.29a.78.78 0 0 1 1.56 0c0 1.56 1.8 2.84 4 2.84s4-1.28 4-2.84a.78.78 0 0 1 1.56 0C17.58 18.08 15.07 20 12 20z"></path><path d="M16 9.28H8.05a.73.73 0 1 1 0-1.45H16a.73.73 0 1 1 0 1.45z"></path><path d="M5.78 17.75h-.21a.73.73 0 0 1-.54-.9l.57-1.92a.76.76 0 0 1 .94-.51l2.28.58a.73.73 0 0 1 .56.88.78.78 0 0 1-1 .52L6.89 16l-.36 1.24a.78.78 0 0 1-.75.51z"></path><path d="M18.22 17.75a.78.78 0 0 1-.75-.53L17.11 16l-1.54.37a.78.78 0 0 1-1-.52.73.73 0 0 1 .56-.88l2.28-.55a.76.76 0 0 1 .94.51l.65 1.9a.73.73 0 0 1-.54.9z"></path></svg>

sailor.icons.anchor.toSvg({ 'stroke-width': 1 })
// <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="sailor sailor-anchor" stroke-width="1"><path d="M12 4.73a.94.94 0 0 1 1 .89 1 1 0 0 1-2 0 .94.94 0 0 1 1-.89M12 4a1.7 1.7 0 0 0-1.76 1.62A1.69 1.69 0 0 0 12 7.23a1.69 1.69 0 0 0 1.77-1.61A1.7 1.7 0 0 0 12 4z"></path><path d="M12 18.87a.75.75 0 0 1-.78-.73V7.47a.78.78 0 0 1 1.56 0v10.67a.75.75 0 0 1-.78.73z"></path><path d="M12 20c-3.08 0-5.58-1.92-5.58-4.29a.78.78 0 0 1 1.56 0c0 1.56 1.8 2.84 4 2.84s4-1.28 4-2.84a.78.78 0 0 1 1.56 0C17.58 18.08 15.07 20 12 20z"></path><path d="M16 9.28H8.05a.73.73 0 1 1 0-1.45H16a.73.73 0 1 1 0 1.45z"></path><path d="M5.78 17.75h-.21a.73.73 0 0 1-.54-.9l.57-1.92a.76.76 0 0 1 .94-.51l2.28.58a.73.73 0 0 1 .56.88.78.78 0 0 1-1 .52L6.89 16l-.36 1.24a.78.78 0 0 1-.75.51z"></path><path d="M18.22 17.75a.78.78 0 0 1-.75-.53L17.11 16l-1.54.37a.78.78 0 0 1-1-.52.73.73 0 0 1 .56-.88l2.28-.55a.76.76 0 0 1 .94.51l.65 1.9a.73.73 0 0 1-.54.9z"></path></svg>

sailor.icons.anchor.toSvg({ class: 'foo bar' })
// <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="sailor sailor-anchor foo bar"><path d="M12 4.73a.94.94 0 0 1 1 .89 1 1 0 0 1-2 0 .94.94 0 0 1 1-.89M12 4a1.7 1.7 0 0 0-1.76 1.62A1.69 1.69 0 0 0 12 7.23a1.69 1.69 0 0 0 1.77-1.61A1.7 1.7 0 0 0 12 4z"></path><path d="M12 18.87a.75.75 0 0 1-.78-.73V7.47a.78.78 0 0 1 1.56 0v10.67a.75.75 0 0 1-.78.73z"></path><path d="M12 20c-3.08 0-5.58-1.92-5.58-4.29a.78.78 0 0 1 1.56 0c0 1.56 1.8 2.84 4 2.84s4-1.28 4-2.84a.78.78 0 0 1 1.56 0C17.58 18.08 15.07 20 12 20z"></path><path d="M16 9.28H8.05a.73.73 0 1 1 0-1.45H16a.73.73 0 1 1 0 1.45z"></path><path d="M5.78 17.75h-.21a.73.73 0 0 1-.54-.9l.57-1.92a.76.76 0 0 1 .94-.51l2.28.58a.73.73 0 0 1 .56.88.78.78 0 0 1-1 .52L6.89 16l-.36 1.24a.78.78 0 0 1-.75.51z"></path><path d="M18.22 17.75a.78.78 0 0 1-.75-.53L17.11 16l-1.54.37a.78.78 0 0 1-1-.52.73.73 0 0 1 .56-.88l2.28-.55a.76.76 0 0 1 .94.51l.65 1.9a.73.73 0 0 1-.54.9z"></path></svg>

View Source

`sailor.replace([attrs])`

Replaces all elements that have a data-sailor attribute with SVG markup corresponding to the element's data-sailor 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: sailor.replace() only works in a browser environment.

Simple usage:

<i data-sailor="anchor"></i>
<!--
will be replaced with:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="sailor sailor-anchor">
  <path
    d="M12 4.73a.94.94 0 0 1 1 .89 1 1 0 0 1-2 0 .94.94 0 0 1 1-.89M12 4a1.7 1.7 0 0 0-1.76 1.62A1.69 1.69 0 0 0 12 7.23a1.69 1.69 0 0 0 1.77-1.61A1.7 1.7 0 0 0 12 4z">
  </path>
  <path d="M12 18.87a.75.75 0 0 1-.78-.73V7.47a.78.78 0 0 1 1.56 0v10.67a.75.75 0 0 1-.78.73z"></path>
  <path
    d="M12 20c-3.08 0-5.58-1.92-5.58-4.29a.78.78 0 0 1 1.56 0c0 1.56 1.8 2.84 4 2.84s4-1.28 4-2.84a.78.78 0 0 1 1.56 0C17.58 18.08 15.07 20 12 20z">
  </path>
  <path d="M16 9.28H8.05a.73.73 0 1 1 0-1.45H16a.73.73 0 1 1 0 1.45z"></path>
  <path
    d="M5.78 17.75h-.21a.73.73 0 0 1-.54-.9l.57-1.92a.76.76 0 0 1 .94-.51l2.28.58a.73.73 0 0 1 .56.88.78.78 0 0 1-1 .52L6.89 16l-.36 1.24a.78.78 0 0 1-.75.51z">
  </path>
  <path
    d="M18.22 17.75a.78.78 0 0 1-.75-.53L17.11 16l-1.54.37a.78.78 0 0 1-1-.52.73.73 0 0 1 .56-.88l2.28-.55a.76.76 0 0 1 .94.51l.65 1.9a.73.73 0 0 1-.54.9z">
  </path>
</svg>
-->

<script>
  sailor.replace()
</script>

You can pass sailor.replace() an attrs object:

<i data-sailor="anchor"></i>
<!--
<i> will be replaced with:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="sailor sailor-anchor foo bar" stroke-width="1">
  <path
    d="M12 4.73a.94.94 0 0 1 1 .89 1 1 0 0 1-2 0 .94.94 0 0 1 1-.89M12 4a1.7 1.7 0 0 0-1.76 1.62A1.69 1.69 0 0 0 12 7.23a1.69 1.69 0 0 0 1.77-1.61A1.7 1.7 0 0 0 12 4z">
  </path>
  <path d="M12 18.87a.75.75 0 0 1-.78-.73V7.47a.78.78 0 0 1 1.56 0v10.67a.75.75 0 0 1-.78.73z"></path>
  <path
    d="M12 20c-3.08 0-5.58-1.92-5.58-4.29a.78.78 0 0 1 1.56 0c0 1.56 1.8 2.84 4 2.84s4-1.28 4-2.84a.78.78 0 0 1 1.56 0C17.58 18.08 15.07 20 12 20z">
  </path>
  <path d="M16 9.28H8.05a.73.73 0 1 1 0-1.45H16a.73.73 0 1 1 0 1.45z"></path>
  <path
    d="M5.78 17.75h-.21a.73.73 0 0 1-.54-.9l.57-1.92a.76.76 0 0 1 .94-.51l2.28.58a.73.73 0 0 1 .56.88.78.78 0 0 1-1 .52L6.89 16l-.36 1.24a.78.78 0 0 1-.75.51z">
  </path>
  <path
    d="M18.22 17.75a.78.78 0 0 1-.75-.53L17.11 16l-1.54.37a.78.78 0 0 1-1-.52.73.73 0 0 1 .56-.88l2.28-.55a.76.76 0 0 1 .94.51l.65 1.9a.73.73 0 0 1-.54.9z">
  </path>
</svg>
-->

<script>
  sailor.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-sailor="anchor" id="my-anchor" class="foo bar" stroke-width="1"></i>
<!--
will be replaced with:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="sailor sailor-anchor foo bar" id="my-anchor" stroke-width="1">
  <path
    d="M12 4.73a.94.94 0 0 1 1 .89 1 1 0 0 1-2 0 .94.94 0 0 1 1-.89M12 4a1.7 1.7 0 0 0-1.76 1.62A1.69 1.69 0 0 0 12 7.23a1.69 1.69 0 0 0 1.77-1.61A1.7 1.7 0 0 0 12 4z">
  </path>
  <path d="M12 18.87a.75.75 0 0 1-.78-.73V7.47a.78.78 0 0 1 1.56 0v10.67a.75.75 0 0 1-.78.73z"></path>
  <path
    d="M12 20c-3.08 0-5.58-1.92-5.58-4.29a.78.78 0 0 1 1.56 0c0 1.56 1.8 2.84 4 2.84s4-1.28 4-2.84a.78.78 0 0 1 1.56 0C17.58 18.08 15.07 20 12 20z">
  </path>
  <path d="M16 9.28H8.05a.73.73 0 1 1 0-1.45H16a.73.73 0 1 1 0 1.45z"></path>
  <path
    d="M5.78 17.75h-.21a.73.73 0 0 1-.54-.9l.57-1.92a.76.76 0 0 1 .94-.51l2.28.58a.73.73 0 0 1 .56.88.78.78 0 0 1-1 .52L6.89 16l-.36 1.24a.78.78 0 0 1-.75.51z">
  </path>
  <path
    d="M18.22 17.75a.78.78 0 0 1-.75-.53L17.11 16l-1.54.37a.78.78 0 0 1-1-.52.73.73 0 0 1 .56-.88l2.28-.55a.76.76 0 0 1 .94.51l.65 1.9a.73.73 0 0 1-.54.9z">
  </path>
</svg>
-->

<script>
  sailor.replace()
</script>

View Source

Related Projects

react-sailor-icons - sailor icons as React components
vue-sailor-icons - sailor icons as Vue components

License

Sailor is licensed under the [MIT License].

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
bin		bin
examples		examples
icons		icons
src		src
.babelrc		.babelrc
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.lintstagedrc		.lintstagedrc
.travis.yml		.travis.yml
LICENSE		LICENSE
README.md		README.md
commitlint.config.js		commitlint.config.js
package-lock.json		package-lock.json
package.json		package.json
webpack.config.js		webpack.config.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Sailor

What is sailor?

Table of Contents

Quick Start

Usage

Client-side JavaScript

1. Install

2. Include

3. Use

4. Replace

Node

1. Install

2. Require

3. Use

SVG Sprite

1. Install

2. Use

API Reference

`sailor.icons`

Usage

`sailor.icons[name].toSvg([attrs])`

Parameters

Usage

`sailor.replace([attrs])`

Parameters

Usage

Related Projects

License

About

Releases

Packages

Languages

License

sailoricons/sailor

Folders and files

Latest commit

History

Repository files navigation

Sailor

What is sailor?

Table of Contents

Quick Start

Usage

Client-side JavaScript

1. Install

2. Include

3. Use

4. Replace

Node

1. Install

2. Require

3. Use

SVG Sprite

1. Install

2. Use

API Reference

sailor.icons

Usage

sailor.icons[name].toSvg([attrs])

Parameters

Usage

sailor.replace([attrs])

Parameters

Usage

Related Projects

License

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

`sailor.icons`

`sailor.icons[name].toSvg([attrs])`

`sailor.replace([attrs])`

Packages