mirror of
https://github.com/feathericons/feather.git
synced 2023-08-10 21:13:24 +03:00
f243624fbd
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> --> ```
56 lines
1.2 KiB
JavaScript
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;
|