/** * @file Implements `replace` function. */ /* global document, DOMParser */ import icons from '../dist/icons.json'; import toSvg from './to-svg'; /** * Replace all elements that have a `data-feather` attribute with SVG markup * corresponding to the element's `data-feather` attribute value. * @param {Object} options */ export default function replace(options = {}) { if (typeof document === 'undefined') { throw new Error('`feather.replace()` only works in a browser environment.'); } const elementsToReplace = document.querySelectorAll('[data-feather]'); Array.from(elementsToReplace).forEach(element => replaceElement(element, options)); } /** * Replace single element with SVG markup * corresponding to the element's `data-feather` attribute value. * @param {Element} element * @param {Object} options */ function replaceElement(element, options) { const key = element.getAttribute('data-feather'); if (!key) { console.error('The required `data-feather` attribute has no value.'); return; } if (!icons[key]) { console.error(`No icon matching '${key}'. See the complete list of icons at https://feathericons.com`); return; } const elementClassAttr = element.getAttribute('class'); const classNames = ( options.class ? `${options.class} ${elementClassAttr}` : elementClassAttr ); const svgString = toSvg(key, Object.assign({}, options, { class: classNames })); const svgDocument = new DOMParser().parseFromString(svgString, 'image/svg+xml'); const svgElement = svgDocument.querySelector('svg'); element.parentNode.replaceChild(svgElement, element); }