Skip to content

Commit f243624

Browse files
author
Cole Bemis
authored
feat: Update API
BREAKING CHANGE: Each icon in the `feather.icons` object is now an `Icon` object with a `name`, `contents`, `tags` and `attrs` property. ```js /* BEFORE */ feather.icons.x // '<line ... /><line ... />' /* AFTER */ feather.icons.x // { // name: 'x', // contents: '<line ... /><line ... />`, // tags: ['cancel', 'close', 'delete', 'remove'], // attrs: { // class: 'feather feather-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', // } // } ``` `feather.toSvg()` has been deprecated in favor of `feather.icons[name].toSvg()`: ```js /* BEFORE */ feather.toSvg('x') /* AFTER */ feather.icons.x.toSvg() ``` `feather.replace()` now copies all attributes on the placeholder element (i.e. `<i>`) to the `<svg>` tag instead of just `class` and `id`: ```html <i data-feather="circle" id="my-circle" class="foo bar" stroke-width="1"></i> <!-- <i> will be replaced with: <svg id="my-circle" class="feather feather-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> --> ```
1 parent 0dc2bf5 commit f243624

32 files changed

+828
-277
lines changed

‎.babelrc‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
{
2-
"presets": [
3-
"es2015"
4-
]
2+
"presets": ["es2015"],
3+
"plugins": ["transform-object-rest-spread"]
54
}

‎.eslintrc.json‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
{
22
"extends": "airbnb-base",
3-
"plugins": [
4-
"import"
5-
],
3+
"plugins": ["import"],
64
"rules": {
7-
"no-use-before-define": "off",
85
"arrow-parens": ["error", "as-needed"],
6+
"no-console": ["error", { "allow": ["warn", "error"] }],
7+
"no-param-reassign": "off",
98
"no-shadow": "off",
10-
"no-console": ["error", { "allow": ["warn", "error"] }]
9+
"no-use-before-define": "off"
1110
}
1211
}

‎.travis.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@ node_js: 6
88
before_script:
99
- npm prune
1010
script:
11-
- npm run all
11+
- npm start
1212
after_success:
1313
- npm run semantic-release

‎Makefile‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎README.md‎

Lines changed: 103 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
[![Travis branch](https://img.shields.io/travis/colebemis/feather/master.svg?style=flat-square)](https://travis-ci.org/colebemis/feather)
44
[![npm](https://img.shields.io/npm/v/feather-icons.svg?style=flat-square)](https://www.npmjs.com/package/feather-icons)
55
[![npm](https://img.shields.io/npm/dm/feather-icons.svg?style=flat-square)](https://npm-stat.com/charts.html?package=feather-icons&from=2017-06-01)
6-
[![Code Climate](https://img.shields.io/codeclimate/github/colebemis/feather.svg?style=flat-square)](https://codeclimate.com/github/colebemis/feather)
76
[![CDNJS version](https://img.shields.io/cdnjs/v/feather-icons.svg?style=flat-square)](https://cdnjs.com/libraries/feather-icons)
7+
[![Code Climate](https://img.shields.io/codeclimate/github/colebemis/feather.svg?style=flat-square)](https://codeclimate.com/github/colebemis/feather)
88

99
## What is Feather?
1010

11-
Feather is a collection of **simply beautiful open source icons**. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
11+
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
1212

1313
**[feathericons.com](https://feathericons.com)**
1414

@@ -20,12 +20,13 @@ npm install feather-icons
2020

2121
* [Quick Start](#quick-start)
2222
* [Usage](#usage)
23-
* [Client-side JavaScript](#client-side-javascript)
23+
* [Client-side](#client-side)
2424
* [Node](#node)
2525
* [API Reference](#api-reference)
2626
* [`feather.icons`](#feathericons)
27-
* [`feather.toSvg()`](#feathertosvgkey-options)
28-
* [`feather.replace()`](#featherreplaceoptions)
27+
* [`feather.icons[name].toSvg()`](#feathericonsnametosvgattrs)
28+
* [`feather.replace()`](#featherreplaceattrs)
29+
* [[DEPRECATED] `feather.toSvg()`](#deprecated-feathertosvgname-attrs)
2930
* [Roadmap](#roadmap)
3031
* [Contributing](#contributing)
3132
* [Related Projects](#related-projects)
@@ -60,7 +61,7 @@ At its core, Feather is a collection of [SVG](https://svgontheweb.com/#svg) file
6061

6162
The following are additional ways you can use Feather.
6263

63-
### Client-side JavaScript
64+
### Client-side
6465

6566
#### 1. Install
6667

@@ -79,7 +80,7 @@ Or just copy [`feather.js`](https://unpkg.com/feather-icons/dist/feather.js) or
7980
Include `feather.js` or `feather.min.js` with a `<script>` tag. These files are located in the `dist` directory of the npm package.
8081

8182
```html
82-
<script src="path/to/dist/feather.min.js"></script>
83+
<script src="path/to/dist/feather.js"></script>
8384
```
8485

8586
Or load the script from a CDN provider.
@@ -104,7 +105,7 @@ See the complete list of icons at [feathericons.com](https://feathericons.com).
104105

105106
#### 4. Replace
106107

107-
Call the `feather.replace` method.
108+
Call the `feather.replace()` method.
108109

109110
```html
110111
<script>
@@ -126,78 +127,108 @@ npm install feather-icons --save
126127
#### 2. Require
127128

128129
```javascript
129-
var feather = require('feather-icons')
130+
const feather = require('feather-icons')
130131
```
131132

132133
#### 3. Use
133-
```javascript
134-
feather.icons.circle
135-
// <circle cx="12" cy="12" r="10"></circle>
136-
137-
feather.toSvg('circle')
138-
// '<svg class="feather feather-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>'
139134

140-
feather.toSvg('circle', { class: 'my-class', 'stroke-width': 1 })
141-
// '<svg class="feather feather-circle my-class" 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>'
135+
```js
136+
feather.icons.x
137+
// {
138+
// name: 'x',
139+
// contents: '<line ... /><line ... />`,
140+
// tags: ['cancel', 'close', 'delete', 'remove'],
141+
// attrs: {
142+
// class: 'feather feather-x',
143+
// xmlns: 'http://www.w3.org/2000/svg',
144+
// width: 24,
145+
// height: 24,
146+
// viewBox: '0 0 24 24',
147+
// fill: 'none',
148+
// stroke: 'currentColor',
149+
// 'stroke-width': 2,
150+
// 'stroke-linecap': 'round',
151+
// 'stroke-linejoin': 'round',
152+
// }
153+
// }
154+
155+
feather.icons.x.toSvg()
156+
// <svg class="feather feather-x" ...><line ... /><line ... /></svg>
157+
158+
feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' })
159+
// <svg class="feather feather-x foo bar" stroke-width="1" color="red" ...><line ... /><line ... /></svg>
142160
```
143161

144162
See the [API Reference](#api-reference) for more information about the available properties and methods of the `feather` object.
145163

146-
### Sprite
147-
148-
*Coming soon*
149-
150164
## API Reference
151165

152166
### `feather.icons`
153167

154-
An object with SVG path information for every icon.
168+
An object with information about every icon.
155169

156170
#### Usage
157171

158-
```javascript
159-
feather.icons.circle
160-
// <circle cx="12" cy="12" r="10"></circle>
161-
162-
feather.icons.clock
163-
// '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 15 15"/>'
172+
```js
173+
feather.icons.x
174+
// {
175+
// name: 'x',
176+
// contents: '<line ... /><line ... />`,
177+
// tags: ['cancel', 'close', 'delete', 'remove'],
178+
// attrs: {
179+
// class: 'feather feather-x',
180+
// xmlns: 'http://www.w3.org/2000/svg',
181+
// width: 24,
182+
// height: 24,
183+
// viewBox: '0 0 24 24',
184+
// fill: 'none',
185+
// stroke: 'currentColor',
186+
// 'stroke-width': 2,
187+
// 'stroke-linecap': 'round',
188+
// 'stroke-linejoin': 'round',
189+
// }
190+
// }
191+
192+
feather.icons.x.toString()
193+
// '<line ... /><line ... />`
164194
```
165195

166-
### `feather.toSvg(key, [options])`
196+
[View Source](https://github.com/colebemis/feather/blob/master/src/icons.js)
197+
198+
### `feather.icons[name].toSvg([attrs])`
167199

168200
Returns an SVG string.
169201

170202
#### Parameters
171203

172204
| Name | Type | Description |
173205
| --------- | ------ | ----------- |
174-
| `key` | string | Icon name |
175-
| `options` (optional) | Object | Key-value pairs in the `options` 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 `options` object. |
206+
| `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. |
176207

177208
#### Usage
178209

179210
```javascript
180-
feather.toSvg('circle')
211+
feather.icons.circle.toSvg()
181212
// '<svg class="feather feather-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>'
182213

183-
feather.toSvg('circle', { 'stroke-width': 1 })
214+
feather.icons.circle.toSvg({ 'stroke-width': 1 })
184215
// '<svg class="feather feather-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>'
185216

186-
feather.toSvg('circle', { class: 'foo bar' })
217+
feather.icons.circle.toSvg({ class: 'foo bar' })
187218
// '<svg class="feather feather-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>'
188219
```
189220

190-
[View Source](https://github.com/colebemis/feather/blob/master/src/to-svg.js)
221+
[View Source](https://github.com/colebemis/feather/blob/master/src/icons.js)
191222

192-
### `feather.replace([options])`
223+
### `feather.replace([attrs])`
193224

194225
Replaces all elements that have a `data-feather` attribute with SVG markup corresponding to the element's `data-feather` attribute value.
195226

196227
#### Parameters
197228

198229
| Name | Type | Description |
199230
| ---------- | ------ | ----------- |
200-
| `options` (optional) | Object | Key-value pairs in the `options` 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 `options` object. |
231+
| `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. |
201232

202233
#### Usage
203234

@@ -216,7 +247,7 @@ Simple usage:
216247
</script>
217248
```
218249

219-
You can pass `feather.replace()` an `options` object:
250+
You can pass `feather.replace()` an `attrs` object:
220251
```html
221252
<i data-feather="circle"></i>
222253
<!--
@@ -229,13 +260,13 @@ You can pass `feather.replace()` an `options` object:
229260
</script>
230261
```
231262

232-
The id and classes on a placeholder element (i.e. `<i>`) will be copied to the `<svg>` tag:
263+
All attributes on the placeholder element (i.e. `<i>`) will be copied to the `<svg>` tag:
233264

234265
```html
235-
<i id="my-circle-icon" class="foo bar" data-feather="circle"></i>
266+
<i data-feather="circle" id="my-circle" class="foo bar" stroke-width="1"></i>
236267
<!--
237268
<i> will be replaced with:
238-
<svg id="my-circle-icon" class="feather feather-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>
269+
<svg id="my-circle" class="feather feather-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>
239270
-->
240271

241272
<script>
@@ -245,19 +276,43 @@ The id and classes on a placeholder element (i.e. `<i>`) will be copied to the `
245276

246277
[View Source](https://github.com/colebemis/feather/blob/master/src/replace.js)
247278

279+
### [DEPRECATED] `feather.toSvg(name, [attrs])`
280+
281+
> **Note:** `feather.toSvg()` is deprecated. Please use `feather.icons[name].toSvg()` instead.
282+
283+
Returns an SVG string.
284+
285+
#### Parameters
286+
287+
| Name | Type | Description |
288+
| --------- | ------ | ----------- |
289+
| `name` | string | Icon name |
290+
| `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. |
291+
292+
#### Usage
293+
294+
```javascript
295+
feather.toSvg('circle')
296+
// '<svg class="feather feather-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>'
297+
298+
feather.toSvg('circle', { 'stroke-width': 1 })
299+
// '<svg class="feather feather-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>'
300+
301+
feather.toSvg('circle', { class: 'foo bar' })
302+
// '<svg class="feather feather-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>'
303+
```
304+
305+
[View Source](https://github.com/colebemis/feather/blob/master/src/to-svg.js)
306+
248307
## Roadmap
249308

250-
- [x] Write contributing guidelines
251309
- [ ] Write icon design guidelines
252-
- [ ] Add usage examples
253-
- [ ] Add SVG sprite
254-
- [ ] Add tests
255310
- [ ] Track code coverage
256311
- [ ] Use Prettier to enforce consistent code style
257-
- [ ] Add search/filter functionality to project website
258-
- [ ] Handle icon aliases
259-
- [ ] Handle usage of custom icons
260312
- [ ] Improve SVG accessibility
313+
- [ ] Handle usage of custom icons
314+
- [ ] Add usage examples
315+
- [ ] Make `<feather-icon>` web component
261316

262317
## Contributing
263318

‎bin/__tests__/__snapshots__/build-icons-object.test.js.snap‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`builds object correctly 1`] = `
4+
Object {
5+
"icon1": "<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line>",
6+
"icon2": "<circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\"></circle>",
7+
}
8+
`;

‎bin/__tests__/build-icons-object.test.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* eslint-env jest */
2+
import buildIconsObject from '../build-icons-object';
3+
4+
const SVG_FILES = {
5+
'icon1.svg':
6+
'<svg 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"><line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" /></svg>',
7+
'icon2.svg':
8+
'<svg 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="11" /></svg>',
9+
};
10+
11+
function getSvg(svgFile) {
12+
return SVG_FILES[svgFile];
13+
}
14+
15+
test('builds object correctly', () => {
16+
expect(buildIconsObject(Object.keys(SVG_FILES), getSvg)).toMatchSnapshot();
17+
});

‎bin/build-icons-json.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import fs from 'fs';
2+
import path from 'path';
3+
4+
import buildIconsObject from './build-icons-object';
5+
6+
const IN_DIR = path.resolve(__dirname, '../icons');
7+
const OUT_FILE = path.resolve(__dirname, '../dist/icons.json');
8+
9+
console.log(`Building ${OUT_FILE}`); // eslint-disable-line no-console
10+
11+
const svgFiles = fs
12+
.readdirSync(IN_DIR)
13+
.filter(file => path.extname(file) === '.svg');
14+
15+
const getSvg = svgFile => fs.readFileSync(path.join(IN_DIR, svgFile));
16+
17+
const icons = buildIconsObject(svgFiles, getSvg);
18+
19+
fs.writeFileSync(OUT_FILE, JSON.stringify(icons));

0 commit comments

Comments
 (0)