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

feat: Updated replace() to pass id from placeholder element (#193)

Browse Source
This commit is contained in:
Brad Bohen 2017-10-11 17:05:10 -04:00 committed by Cole Bemis
parent b7d22291f1
commit e80f80524a
3 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -229,13 +229,13 @@ You can pass `feather.replace()` an `options` object:
</script>
```
All classes on a placeholder element (i.e. `<i>`) will be copied to the `<svg>` tag:
The id and classes on a placeholder element (i.e. `<i>`) will be copied to the `<svg>` tag:
```html
<i class="foo bar" data-feather="circle"></i>
<i id="my-circle-icon" class="foo bar" data-feather="circle"></i>
<!--
<i> will be replaced with:
<svg 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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
<svg id="my-circle-icon" 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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->
<script>

4
src/replace.js
View File

@ -42,11 +42,13 @@ function replaceElement(element, options) {
}
const elementClassAttr = element.getAttribute('class') || '';
const elementIdAttr = element.getAttribute('id');
const classNames = (
options.class ? `${options.class} ${elementClassAttr}` : elementClassAttr
);
const svgString = toSvg(key, Object.assign({}, options, { class: classNames }));
const svgOptions = Object.assign({}, options, { class: classNames, id: elementIdAttr });
const svgString = toSvg(key, svgOptions);
const svgDocument = new DOMParser().parseFromString(svgString, 'image/svg+xml');
const svgElement = svgDocument.querySelector('svg');

8
src/to-svg.js
View File

@ -35,7 +35,7 @@ export default function toSvg(key, options = {}) {
combinedOptions.class = addDefaultClassNames(combinedOptions.class, key);
const attributes = optionsToAtrributes(combinedOptions);
const attributes = optionsToAttributes(combinedOptions);
return `<svg ${attributes}>${icons[key]}</svg>`;
}
@ -64,11 +64,13 @@ function addDefaultClassNames(classNames, key) {
* @param {Object} options
* @returns {string}
*/
function optionsToAtrributes(options) {
function optionsToAttributes(options) {
const attributes = [];
Object.keys(options).forEach(key => {
attributes.push(`${key}="${options[key]}"`);
if (options[key]) {
attributes.push(`${key}="${options[key]}"`);
}
});
return attributes.join(' ');