Lucide 0.15.0 (#272)

* add configs

* Add vue components

* Add documentation

* add alpha release version

* improve npm ignore files

* add tests

* Make style and class attrs work

* 📦 bump version

* Add Icon suffix for component names

* bump version

* Add icon component example

* remove space

* add new build strategy

* Write a better intro

* add other node design

* fix

* add new default template

* add tempalte

* improve code

* small improvements

* small improvements

* move files

* Connect lucide with lucide-react

* Add support for vue

* Add licenses to packages

* Fix tests

* refactor build scripts

* Minor code fixes

* update homepage readme

* Update footer text

* Add a better introduction to packages

* Split up in tempaltes

* Add new types build file

* Setup workflow file

* update readme

* update

* Fix build

* remove debug code

* Add check if svgs have duplicated children

* Add check if their are no children

* small fixes

* last fixes in the build

* Move script to packages folder

* Fix tests and add types for lucide

* Add rule to package.json

* add types in build

* add npm ignore

* update package.jsons
This commit is contained in:
Eric Fennis
2021-03-23 19:26:50 +01:00
committed by GitHub
parent 9d101a5275
commit b4e4f002f2
81 changed files with 5804 additions and 1655 deletions

View File

@@ -1,30 +1,13 @@
/* eslint-disable import/no-extraneous-dependencies */
import Svgo from 'svgo';
import cheerio from 'cheerio';
import { format } from 'prettier';
import { parseSync, stringify } from 'svgson';
import DEFAULT_ATTRS from './default-attrs.json';
/**
* Process SVG string.
* @param {string} svg - An SVG string.
* @param {Promise<string>}
*/
function processSvg(svg) {
return (
optimize(svg)
.then(setAttrs)
.then(optimizedSvg => format(optimizedSvg, { parser: 'babel' }))
// 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>}
* @returns {Promise<string>} An optimized svg
*/
function optimize(svg) {
const svgo = new Svgo({
@@ -42,14 +25,30 @@ function optimize(svg) {
/**
* Set default attibutes on SVG.
* @param {string} svg - An SVG string.
* @returns {string}
* @returns {string} An SVG string, included with the default attributes.
*/
function setAttrs(svg) {
const $ = cheerio.load(svg);
const contents = parseSync(svg);
Object.keys(DEFAULT_ATTRS).forEach(key => $('svg').attr(key, DEFAULT_ATTRS[key]));
contents.attributes = DEFAULT_ATTRS;
return $('body').html();
return stringify(contents);
}
/**
* Process SVG string.
* @param {string} svg An SVG string.
* @returns {Promise<string>} An optimized svg
*/
function processSvg(svg) {
return (
optimize(svg)
.then(setAttrs)
.then(optimizedSvg => format(optimizedSvg, { parser: 'babel' }))
// remove semicolon inserted by prettier
// because prettier thinks it's formatting JSX not HTML
.then(svg => svg.replace(/;/g, ''))
);
}
export default processSvg;

View File

@@ -1,53 +0,0 @@
/* eslint-disable import/no-extraneous-dependencies */
import { parseDOM } from 'htmlparser2';
import DEFAULT_ATTRS from './default-attrs.json';
import { toCamelCase, hash } from '../helpers';
const camelizeAttrs = attrs =>
Object.keys(attrs).reduce((newAttrs, attr) => {
const attrKey = toCamelCase(attr);
newAttrs[attrKey] = attrs[attr];
return newAttrs;
}, {});
export default (iconsObject, options) => {
const iconNodes = {};
Object.keys(iconsObject).forEach(icon => {
const svgString = iconsObject[icon];
const dom = parseDOM(svgString);
const children = dom.map(element => {
if (options.renderUniqueKey) {
const hashSource = {
name: element.name,
...element.attribs,
};
const uniqueKey = hash(JSON.stringify(hashSource));
element.attribs.key = uniqueKey;
}
return [
element.name,
{
...(options.camelizeAttrs ? camelizeAttrs(element.attribs) : element.attribs),
},
];
});
iconNodes[icon] = !options.noDefaultAttrs
? [
'svg',
{
...(options.camelizeAttrs ? camelizeAttrs(DEFAULT_ATTRS) : DEFAULT_ATTRS),
},
children,
]
: children;
});
return iconNodes;
};

View File

@@ -1,19 +1,7 @@
/* eslint-disable import/no-extraneous-dependencies */
import path from 'path';
import cheerio from 'cheerio';
import { minify } from 'html-minifier';
import { readSvg } from '../helpers';
/**
* Get contents between opening and closing `<svg>` tags.
* @param {string} svg
* @returns {string}
*/
function getSvgContents(svg) {
const $ = cheerio.load(svg);
return minify($('svg').html(), { collapseWhitespace: true });
}
import { basename } from 'path';
import { parseSync } from 'svgson';
import { generateHashedKey, readSvg, hasDuplicatedChildren } from '../helpers';
/**
* Build an object in the format: `{ <name>: <contents> }`.
@@ -21,12 +9,29 @@ function getSvgContents(svg) {
* @param {Function} getSvg - A function that returns the contents of an SVG file given a filename.
* @returns {Object}
*/
export default (svgFiles, iconsDirectory) =>
export default (svgFiles, iconsDirectory, renderUniqueKey = false) =>
svgFiles
.map(svgFile => {
const name = path.basename(svgFile, '.svg');
const name = basename(svgFile, '.svg');
const svg = readSvg(svgFile, iconsDirectory);
const contents = getSvgContents(svg);
const contents = parseSync(svg);
if (!(contents.children && contents.children.length)) {
throw new Error(`${name}.svg has no children!`);
}
if (hasDuplicatedChildren(contents.children)) {
throw new Error(`Duplicated children in ${name}.svg`);
}
if (renderUniqueKey) {
contents.children = contents.children.map(child => {
child.attributes.key = generateHashedKey(child);
return child;
});
}
return { name, contents };
})
.reduce((icons, icon) => {