Mirrors/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2025-12-16 22:27:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add default classnames, fix #317

Browse Source
This commit is contained in:
Eric Fennis
2021-09-17 16:23:17 +02:00
parent 26f85a75d2
commit f70a0e1945
9 changed files with 50 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/lucide-preact/src/createPreactComponent.js
View File

@@ -1,6 +1,16 @@
import { h } from 'preact';
import defaultAttributes from './defaultAttributes';
/**
* Converts string to KebabCase
* Copied from scripts/helper. If anyone knows how to properly import it here
* then please fix it.
*
* @param {string} string
* @returns {string} A kebabized string
*/
export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
export default (iconName, iconNode) => {
const Component = ({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }) =>
h(
@@ -11,6 +21,7 @@ export default (iconName, iconNode) => {
height: size,
stroke: color,
'stroke-width': strokeWidth,
class: `lucide lucide-${toKebabCase(iconName)}`,
...rest,
},
iconNode.map(([tag, attrs]) => h(tag, attrs)),

4
packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.js.snap
View File

@@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
exports[`Using lucide icon components should render an component 1`] = `"<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\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
exports[`Using lucide icon components should render an component 1`] = `"<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\\" class=\\"lucide lucide-grid\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;

11
packages/lucide-react/src/createReactComponent.js
View File

@@ -2,6 +2,16 @@ import { forwardRef, createElement } from 'react';
import PropTypes from 'prop-types';
import defaultAttributes from './defaultAttributes';
/**
* Converts string to KebabCase
* Copied from scripts/helper. If anyone knows how to properly import it here
* then please fix it.
*
* @param {string} string
* @returns {string} A kebabized string
*/
export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
export default (iconName, iconNode) => {
const Component = forwardRef(
({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }, ref) =>
@@ -14,6 +24,7 @@ export default (iconName, iconNode) => {
height: size,
stroke: color,
strokeWidth,
className: `lucide lucide-${toKebabCase(iconName)}`,
...rest,
},
iconNode.map(([tag, attrs]) => createElement(tag, attrs)),

4
packages/lucide-react/tests/__snapshots__/lucide-react.spec.js.snap
View File

@@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
exports[`Using lucide icon components should render an component 1`] = `"<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\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
exports[`Using lucide icon components should render an component 1`] = `"<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\\" class=\\"lucide lucide-grid\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;

13
packages/lucide-vue-next/src/createVueComponent.js
View File

@@ -1,15 +1,24 @@
import { h } from 'vue';
import defaultAttributes from './defaultAttributes';
/**
* Converts string to KebabCase
* Copied from scripts/helper. If anyone knows how to properly import it here
* then please fix it.
*
* @param {string} string
* @returns {string} A kebabized string
*/
export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
const createVueComponent = (iconName, iconNode) => (props, context) =>
h(
'svg',
{
...defaultAttributes,
...{
width: props.size || defaultAttributes.width,
height: props.size || defaultAttributes.height,
},
class: ['lucide', `lucide-${toKebabCase(iconName)}`],
...context.attrs,
...props,
},

6
packages/lucide-vue-next/tests/__snapshots__/lucide-vue-next.spec.js.snap
View File

@@ -160,6 +160,7 @@ VueWrapper {
data-v-app=""
>
<svg
class="lucide lucide-smile-icon"
fill="none"
height="24"
stroke="currentColor"
@@ -253,6 +254,7 @@ VueWrapper {
},
"rootVM": Object {},
"wrapperElement": <svg
class="lucide lucide-smile-icon"
fill="none"
height="24"
stroke="currentColor"
@@ -304,6 +306,7 @@ VueWrapper {
data-v-app=""
>
<svg
class="lucide lucide-smile-icon"
fill="none"
height="48"
size="48"
@@ -398,6 +401,7 @@ VueWrapper {
},
"rootVM": Object {},
"wrapperElement": <svg
class="lucide lucide-smile-icon"
fill="none"
height="48"
size="48"
@@ -450,6 +454,7 @@ VueWrapper {
data-v-app=""
>
<svg
class="lucide lucide-smile-icon"
fill="none"
height="24"
stroke="currentColor"
@@ -542,6 +547,7 @@ VueWrapper {
},
"rootVM": Object {},
"wrapperElement": <svg
class="lucide lucide-smile-icon"
fill="none"
height="24"
stroke="currentColor"

2
packages/lucide/src/replaceElement.js
View File

@@ -73,7 +73,7 @@ export default (element, { nameAttr, icons, attrs }) => {
...attrs,
};
const classNames = combineClassNames(['lucide', elementAttrs, attrs]);
const classNames = combineClassNames(['lucide', `lucide-${iconName}`, elementAttrs, attrs]);
if (classNames) {
iconAttrs.class = classNames;

4
packages/lucide/tests/__snapshots__/lucide.spec.js.snap
View File

@@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`createIcons should add custom attributes 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"black\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" icon-name=\\"volume-2\\" class=\\"lucide icon custom-class\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07\\"></path></svg>"`;
exports[`createIcons should add custom attributes 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"black\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" icon-name=\\"volume-2\\" class=\\"lucide lucide-volume-2 icon custom-class\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07\\"></path></svg>"`;
exports[`createIcons should read elements from DOM and replace it with icons 1`] = `"<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\\" icon-name=\\"volume-2\\" class=\\"lucide\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07\\"></path></svg>"`;
exports[`createIcons should read elements from DOM and replace it with icons 1`] = `"<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\\" icon-name=\\"volume-2\\" class=\\"lucide lucide-volume-2\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07\\"></path></svg>"`;

4
packages/lucide/tests/lucide.spec.js
View File

@@ -11,7 +11,7 @@ const getOriginalSvg = (iconName) => {
const svgParsed = parseSync(svgContent);
svgParsed.attributes['icon-name'] = iconName;
svgParsed.attributes['class'] = 'lucide';
svgParsed.attributes['class'] = `lucide lucide-${iconName}`;
return stringify(svgParsed, { selfClose: false });
};
@@ -45,7 +45,7 @@ describe('createIcons', () => {
document.body.innerHTML = `<i icon-name="volume-2" class="lucide"></i>`;
const attrs = {
class: 'lucide icon custom-class',
class: 'lucide lucide-volume-2 icon custom-class',
fill: 'black',
};