mirror/feather
1
0
Fork 0
mirror of https://github.com/feathericons/feather.git synced 2023-08-10 21:13:24 +03:00
Code Issues Projects Releases Wiki Activity

Make replaceElement function part of the public API

Browse Source
This commit is contained in:
Emir da Ponte 2022-01-28 20:30:09 -03:00
parent 734f3f5114
commit b3054cb9d4
3 changed files with 46 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/index.js
View File

@ -1,5 +1,6 @@
import icons from './icons';
import toSvg from './to-svg';
import replace from './replace';
import replaceElement from './replace-element';
module.exports = { icons, toSvg, replace };
module.exports = { icons, toSvg, replace, replaceElement };

43
src/replace-element.js Normal file
View File

@ -0,0 +1,43 @@
/* eslint-env browser */
import classnames from 'classnames/dedupe';
import icons from './icons';
/**
* Replace a single HTML element with SVG markup
* corresponding to the element's `data-feather` attribute value.
* @param {HTMLElement} element
* @param {Object} attrs
*/
function replaceElement(element, attrs = {}) {
const elementAttrs = getAttrs(element);
const name = elementAttrs['data-feather'];
delete elementAttrs['data-feather'];
const svgString = icons[name].toSvg({
...attrs,
...elementAttrs,
...{ class: classnames(attrs.class, elementAttrs.class) },
});
const svgDocument = new DOMParser().parseFromString(
svgString,
'image/svg+xml',
);
const svgElement = svgDocument.querySelector('svg');
element.parentNode.replaceChild(svgElement, element);
}
/**
* Get the attributes of an HTML element.
* @param {HTMLElement} element
* @returns {Object}
*/
function getAttrs(element) {
return Array.from(element.attributes).reduce((attrs, attr) => {
attrs[attr.name] = attr.value;
return attrs;
}, {});
}
export default replaceElement;

41
src/replace.js
View File

@ -1,7 +1,5 @@
/* eslint-env browser */
import classnames from 'classnames/dedupe';
import icons from './icons';
import replaceElement from './replace-element';
/**
* Replace all HTML elements that have a `data-feather` attribute with SVG markup
@ -20,41 +18,4 @@ function replace(attrs = {}) {
);
}
/**
* Replace a single HTML element with SVG markup
* corresponding to the element's `data-feather` attribute value.
* @param {HTMLElement} element
* @param {Object} attrs
*/
function replaceElement(element, attrs = {}) {
const elementAttrs = getAttrs(element);
const name = elementAttrs['data-feather'];
delete elementAttrs['data-feather'];
const svgString = icons[name].toSvg({
...attrs,
...elementAttrs,
...{ class: classnames(attrs.class, elementAttrs.class) },
});
const svgDocument = new DOMParser().parseFromString(
svgString,
'image/svg+xml',
);
const svgElement = svgDocument.querySelector('svg');
element.parentNode.replaceChild(svgElement, element);
}
/**
* Get the attributes of an HTML element.
* @param {HTMLElement} element
* @returns {Object}
*/
function getAttrs(element) {
return Array.from(element.attributes).reduce((attrs, attr) => {
attrs[attr.name] = attr.value;
return attrs;
}, {});
}
export default replace;