mirror of
https://github.com/feathericons/feather.git
synced 2023-08-10 21:13:24 +03:00
f243624fbd
BREAKING CHANGE:
Each icon in the `feather.icons` object is now an `Icon` object with a `name`, `contents`, `tags` and `attrs` property.
```js
/* BEFORE */
feather.icons.x
// '<line ... /><line ... />'
/* AFTER */
feather.icons.x
// {
// name: 'x',
// contents: '<line ... /><line ... />`,
// tags: ['cancel', 'close', 'delete', 'remove'],
// attrs: {
// class: 'feather feather-x',
// 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',
// }
// }
```
`feather.toSvg()` has been deprecated in favor of `feather.icons[name].toSvg()`:
```js
/* BEFORE */
feather.toSvg('x')
/* AFTER */
feather.icons.x.toSvg()
```
`feather.replace()` now copies all attributes on the placeholder element (i.e. `<i>`) to the `<svg>` tag instead of just `class` and `id`:
```html
<i data-feather="circle" id="my-circle" class="foo bar" stroke-width="1"></i>
<!--
<i> will be replaced with:
<svg id="my-circle" 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="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->
```
33 lines
1.2 KiB
JavaScript
33 lines
1.2 KiB
JavaScript
/* eslint-env jest, browser */
|
|
import replace from '../replace';
|
|
|
|
jest.mock('../../dist/icons.json', () => ({
|
|
icon1:
|
|
'<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
|
|
icon2: '<circle cx="12" cy="12" r="11" />',
|
|
}));
|
|
|
|
test('replaces [data-feather] elements with SVG markup', () => {
|
|
document.body.innerHTML =
|
|
'<i data-feather="icon1"></i><span data-feather="icon2"></i>';
|
|
expect(document.body.innerHTML).toMatchSnapshot();
|
|
replace();
|
|
expect(document.body.innerHTML).toMatchSnapshot();
|
|
});
|
|
|
|
test('copies placeholder element attributes to <svg> tag', () => {
|
|
document.body.innerHTML =
|
|
'<i data-feather="icon1" id="test" class="foo bar" stroke-width="1"></i>';
|
|
expect(document.body.innerHTML).toMatchSnapshot();
|
|
replace();
|
|
expect(document.body.innerHTML).toMatchSnapshot();
|
|
});
|
|
|
|
test('sets attributes passed as parameters', () => {
|
|
document.body.innerHTML =
|
|
'<i data-feather="icon1" id="test" class="foo bar" stroke-width="1"></i>';
|
|
expect(document.body.innerHTML).toMatchSnapshot();
|
|
replace({ class: 'foo bar hello', 'stroke-width': 1.5, color: 'salmon' });
|
|
expect(document.body.innerHTML).toMatchSnapshot();
|
|
});
|