diff --git a/README.md b/README.md index 64c9ad0b..33abc723 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ npm install feather-icons * [`feather.icons`](#feathericons) * [`feather.icons[name].toSvg()`](#feathericonsnametosvgattrs) * [`feather.replace()`](#featherreplaceattrs) + * [`feather.replaceElement()`](#featherreplaceelementelement-attrs) * [(DEPRECATED) `feather.toSvg()`](#deprecated-feathertosvgname-attrs) * [Contributing](#contributing) * [Related Projects](#related-projects) @@ -354,6 +355,71 @@ All attributes on the placeholder element (i.e. ``) will be copied to the `` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `` tag can be overridden with the `attrs` object. | + +#### Usage + +> **Note:** `feather.replaceElement()` only works in a browser environment. + +Simple usage: +```html + + + + +``` + +You can pass `feather.replaceElement()` an `attrs` object: +```html + + + + +``` + +All attributes on the placeholder element (i.e. ``) will be copied to the `` tag: + +```html + + + + +``` + +[View Source](https://github.com/colebemis/feather/blob/master/src/replaceElement.js) + +--- + ### (DEPRECATED) `feather.toSvg(name, [attrs])` > **Note:** `feather.toSvg()` is deprecated. Please use `feather.icons[name].toSvg()` instead. diff --git a/src/index.js b/src/index.js index 31362972..aeecd0f8 100644 --- a/src/index.js +++ b/src/index.js @@ -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 }; diff --git a/src/replace-element.js b/src/replace-element.js new file mode 100644 index 00000000..c9ffb743 --- /dev/null +++ b/src/replace-element.js @@ -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; diff --git a/src/replace.js b/src/replace.js index 61475da4..079f7069 100644 --- a/src/replace.js +++ b/src/replace.js @@ -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;