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: Update API

Browse Source 
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>
-->
```
This commit is contained in:
Cole Bemis
2017-11-18 20:00:16 -08:00
committed by GitHub
parent 0dc2bf5c9d
commit f243624fbd
32 changed files with 825 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
bin/__tests__/__snapshots__/build-icons-object.test.js.snap Normal file
View File

@ -0,0 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`builds object correctly 1`] = `
Object {
"icon1": "<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line>",
"icon2": "<circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\"></circle>",
}
`;

17
bin/__tests__/build-icons-object.test.js Normal file
View File

@ -0,0 +1,17 @@
/* eslint-env jest */
import buildIconsObject from '../build-icons-object';
const SVG_FILES = {
'icon1.svg':
'<svg 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"><line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" /></svg>',
'icon2.svg':
'<svg 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="11" /></svg>',
};
function getSvg(svgFile) {
return SVG_FILES[svgFile];
}
test('builds object correctly', () => {
expect(buildIconsObject(Object.keys(SVG_FILES), getSvg)).toMatchSnapshot();
});

19
bin/build-icons-json.js Normal file
View File

@ -0,0 +1,19 @@
import fs from 'fs';
import path from 'path';
import buildIconsObject from './build-icons-object';
const IN_DIR = path.resolve(__dirname, '../icons');
const OUT_FILE = path.resolve(__dirname, '../dist/icons.json');
console.log(`Building ${OUT_FILE}`); // eslint-disable-line no-console
const svgFiles = fs
.readdirSync(IN_DIR)
.filter(file => path.extname(file) === '.svg');
const getSvg = svgFile => fs.readFileSync(path.join(IN_DIR, svgFile));
const icons = buildIconsObject(svgFiles, getSvg);
fs.writeFileSync(OUT_FILE, JSON.stringify(icons));

34
bin/build-icons-object.js Normal file
View File

@ -0,0 +1,34 @@
/* eslint-disable import/no-extraneous-dependencies */
import path from 'path';
import cheerio from 'cheerio';
/**
* Build an object in the format: `{ <name>: <contents> }`.
* @param {string[]} svgFiles - A list of file names.
* @param {Function} getSvg - A function that returns the contents of an SVG file.
* @returns {Object}
*/
function buildIconsObject(svgFiles, getSvg) {
return svgFiles
.map(svgFile => {
const name = path.basename(svgFile, '.svg');
const svg = getSvg(svgFile);
const contents = getSvgContents(svg);
return { name, contents };
})
.reduce((icons, icon) => {
icons[icon.name] = icon.contents;
return icons;
}, {});
}
/**
* Get contents between opening and closing `<svg>` tags.
* @param {string} svg
*/
function getSvgContents(svg) {
const $ = cheerio.load(svg);
return $('svg').html();
}
export default buildIconsObject;

71
bin/build-json.js
View File

@ -1,71 +0,0 @@
/**
* @file Builds `icons.json` from `icons` directory.
*/
/* eslint-disable import/no-extraneous-dependencies */
import fs from 'fs';
import path from 'path';
import RSVP from 'rsvp';
import Svgo from 'svgo';
import parse5 from 'parse5';
const svgFiles = fs.readdirSync(path.resolve(__dirname, '../icons'))
.filter(file => path.extname(file) === '.svg');
buildIconsObject(svgFiles)
.then(icons => {
fs.writeFileSync(
path.resolve(__dirname, '../dist/icons.json'),
JSON.stringify(icons),
);
});
/**
* Build an icons object in the format: `{ <icon name>: <svg content> }`.
* @param {string[]} svgFiles - A list of file names.
* @returns {RSVP.Promise<Object>}
*/
function buildIconsObject(svgFiles) {
const icons = {};
svgFiles.forEach(svgFile => {
const svg = fs.readFileSync(path.resolve(__dirname, '../icons', svgFile), 'utf8');
const key = path.basename(svgFile, '.svg');
icons[key] = optimizeSvg(svg)
.then(optimizedSvg => getSvgContent(optimizedSvg));
});
return RSVP.hash(icons);
}
/**
* Optimize SVG with `svgo`.
* @param {string} svg - An SVG string.
* @returns {RSVP.Promise<string>}
*/
function optimizeSvg(svg) {
// configure svgo
const svgo = new Svgo({
plugins: [
{ convertShapeToPath: false },
{ mergePaths: false },
{ removeAttrs: { attrs: '(fill|stroke.*)' } },
],
});
return new RSVP.Promise(resolve => {
svgo.optimize(svg, ({ data }) => resolve(data));
});
}
/**
* Get content between opening and closing `<svg>` tags.
* @param {string} svg - An SVG string.
* @returns {string}
*/
function getSvgContent(svg) {
const fragment = parse5.parseFragment(svg);
const content = parse5.serialize(fragment.childNodes[0]);
return content;
}

16
bin/build-svgs.js
View File

@ -1,13 +1,13 @@
/**
* @file Builds `dist/icons` directory.
*/
import fs from 'fs';
import path from 'path';
import { icons, toSvg } from '../src';
import icons from '../src/icons';
Object.keys(icons).forEach(icon => {
const svg = toSvg(icon);
const OUT_DIR = path.resolve(__dirname, '../dist/icons');
fs.writeFileSync(path.resolve(__dirname, `../dist/icons/${icon}.svg`), svg);
console.log(`Building SVGs in ${OUT_DIR}`); // eslint-disable-line no-console
Object.keys(icons).forEach(name => {
const svg = icons[name].toSvg();
fs.writeFileSync(path.join(OUT_DIR, `${name}.svg`), svg);
});

14
bin/build.sh Executable file
View File

@ -0,0 +1,14 @@
#!/bin/bash
./node_modules/.bin/babel-node bin/process-svgs.js
./node_modules/.bin/rimraf dist
mkdir dist
./node_modules/.bin/babel-node bin/build-icons-json.js
./node_modules/.bin/rimraf dist/icons
mkdir dist/icons
./node_modules/.bin/babel-node bin/build-svgs.js
./node_modules/.bin/webpack --output-filename feather.js
./node_modules/.bin/webpack --output-filename feather.min.js -p

10
bin/process-svg.js
View File

@ -3,7 +3,7 @@ import Svgo from 'svgo';
import cheerio from 'cheerio';
import { format } from 'prettier';
import DEFAULT_ATTRIBUTES from '../src/default-attributes.json';
import DEFAULT_ATTRS from '../src/default-attrs.json';
/**
* Process SVG string.
@ -13,7 +13,7 @@ import DEFAULT_ATTRIBUTES from '../src/default-attributes.json';
function processSvg(svg) {
return (
optimize(svg)
.then(setAttributes)
.then(setAttrs)
.then(format)
// remove semicolon inserted by prettier
// because prettier thinks it's formatting JSX not HTML
@ -46,11 +46,11 @@ function optimize(svg) {
* @param {string} svg - An SVG string.
* @returns {string}
*/
function setAttributes(svg) {
function setAttrs(svg) {
const $ = cheerio.load(svg);
Object.keys(DEFAULT_ATTRIBUTES).forEach(key =>
$('svg').attr(key, DEFAULT_ATTRIBUTES[key]),
Object.keys(DEFAULT_ATTRS).forEach(key =>
$('svg').attr(key, DEFAULT_ATTRS[key]),
);
return $('body').html();

13
bin/process-svgs.js
View File

@ -1,15 +1,18 @@
/* eslint-disable import/no-extraneous-dependencies */
import fs from 'fs';
import path from 'path';
import processSvg from './process-svg';
const ICONS_DIR = path.resolve(__dirname, '../icons');
const IN_DIR = path.resolve(__dirname, '../icons');
console.log(`Processing SVGs in ${IN_DIR}`); // eslint-disable-line no-console
fs
.readdirSync(ICONS_DIR)
.readdirSync(IN_DIR)
.filter(file => path.extname(file) === '.svg')
.forEach(svgFile => {
const svg = fs.readFileSync(path.join(ICONS_DIR, svgFile));
processSvg(svg).then(svg => fs.writeFileSync(path.join(ICONS_DIR, svgFile), svg));
const svg = fs.readFileSync(path.join(IN_DIR, svgFile));
processSvg(svg).then(svg =>
fs.writeFileSync(path.join(IN_DIR, svgFile), svg),
);
});