2017-11-13 19:13:11 +03:00
|
|
|
import Svgo from 'svgo';
|
|
|
|
import cheerio from 'cheerio';
|
|
|
|
import { format } from 'prettier';
|
|
|
|
|
feat: Update API
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>
-->
```
2017-11-19 07:00:16 +03:00
|
|
|
import DEFAULT_ATTRS from '../src/default-attrs.json';
|
2017-11-13 19:13:11 +03:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Process SVG string.
|
|
|
|
* @param {string} svg - An SVG string.
|
2021-09-22 08:58:00 +03:00
|
|
|
* @returns {Promise<string>}
|
2017-11-13 19:13:11 +03:00
|
|
|
*/
|
|
|
|
function processSvg(svg) {
|
|
|
|
return (
|
|
|
|
optimize(svg)
|
feat: Update API
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>
-->
```
2017-11-19 07:00:16 +03:00
|
|
|
.then(setAttrs)
|
2017-11-13 19:13:11 +03:00
|
|
|
.then(format)
|
|
|
|
// remove semicolon inserted by prettier
|
|
|
|
// because prettier thinks it's formatting JSX not HTML
|
|
|
|
.then(svg => svg.replace(/;/g, ''))
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Optimize SVG with `svgo`.
|
|
|
|
* @param {string} svg - An SVG string.
|
|
|
|
* @returns {Promise<string>}
|
|
|
|
*/
|
|
|
|
function optimize(svg) {
|
|
|
|
const svgo = new Svgo({
|
|
|
|
plugins: [
|
|
|
|
{ convertShapeToPath: false },
|
|
|
|
{ mergePaths: false },
|
|
|
|
{ removeAttrs: { attrs: '(fill|stroke.*)' } },
|
|
|
|
{ removeTitle: true },
|
|
|
|
],
|
|
|
|
});
|
|
|
|
|
|
|
|
return new Promise(resolve => {
|
|
|
|
svgo.optimize(svg, ({ data }) => resolve(data));
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Set default attibutes on SVG.
|
|
|
|
* @param {string} svg - An SVG string.
|
|
|
|
* @returns {string}
|
|
|
|
*/
|
feat: Update API
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>
-->
```
2017-11-19 07:00:16 +03:00
|
|
|
function setAttrs(svg) {
|
2017-11-13 19:13:11 +03:00
|
|
|
const $ = cheerio.load(svg);
|
|
|
|
|
feat: Update API
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>
-->
```
2017-11-19 07:00:16 +03:00
|
|
|
Object.keys(DEFAULT_ATTRS).forEach(key =>
|
|
|
|
$('svg').attr(key, DEFAULT_ATTRS[key]),
|
2017-11-13 19:13:11 +03:00
|
|
|
);
|
|
|
|
|
|
|
|
return $('body').html();
|
|
|
|
}
|
|
|
|
|
|
|
|
export default processSvg;
|