FilesExpand file tree

master

/

replace.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

60 lines (51 loc) · 1.57 KB

master

/

replace.js

Copy path

Top

File metadata and controls

• Code
• Blame

60 lines (51 loc) · 1.57 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

/* eslint-env browser */

import classnames from 'classnames/dedupe';

import icons from './icons';

/**

* Replace all HTML elements that have a `data-feather` attribute with SVG markup

* corresponding to the element's `data-feather` attribute value.

* @param {Object} attrs

*/

function replace(attrs = {}) {

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, 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;