mirror of
https://github.com/feathericons/feather.git
synced 2023-08-10 21:13:24 +03:00
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> --> ```
This commit is contained in:
34
bin/build-icons-object.js
Normal file
34
bin/build-icons-object.js
Normal 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;
|
Reference in New Issue
Block a user