feather/src/icon.js
Cole Bemis f243624fbd
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>
-->
```
2017-11-18 20:00:16 -08:00

56 lines
1.2 KiB
JavaScript

import classnames from 'classnames/dedupe';
import DEFAULT_ATTRS from './default-attrs.json';
class Icon {
constructor(name, contents, tags = []) {
this.name = name;
this.contents = contents;
this.tags = tags;
this.attrs = {
...DEFAULT_ATTRS,
...{ class: `feather feather-${name}` },
};
}
/**
* Create an SVG string.
* @param {Object} attrs
* @returns {string}
*/
toSvg(attrs = {}) {
const combinedAttrs = {
...this.attrs,
...attrs,
...{ class: classnames(this.attrs.class, attrs.class) },
};
return `<svg ${attrsToString(combinedAttrs)}>${this.contents}</svg>`;
}
/**
* Return string representation of an `Icon`.
*
* Added for backward compatibility. If old code expects `feather.icons.<name>`
* to be a string, `toString()` will get implicitly called.
*
* @returns {string}
*/
toString() {
return this.contents;
}
}
/**
* Convert attributes object to string of HTML attributes.
* @param {Object} attrs
* @returns {string}
*/
function attrsToString(attrs) {
return Object.keys(attrs)
.map(key => `${key}="${attrs[key]}"`)
.join(' ');
}
export default Icon;