diff --git a/packages/lucide-preact/src/createPreactComponent.js b/packages/lucide-preact/src/createPreactComponent.js index 5940b4e47..8f383878a 100644 --- a/packages/lucide-preact/src/createPreactComponent.js +++ b/packages/lucide-preact/src/createPreactComponent.js @@ -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)), diff --git a/packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.js.snap b/packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.js.snap index 2504abcf3..dba35b755 100644 --- a/packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.js.snap +++ b/packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.js.snap @@ -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`] = `""`; +exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `""`; -exports[`Using lucide icon components should render an component 1`] = `""`; +exports[`Using lucide icon components should render an component 1`] = `""`; diff --git a/packages/lucide-react/src/createReactComponent.js b/packages/lucide-react/src/createReactComponent.js index ba97a398a..9f4794e22 100644 --- a/packages/lucide-react/src/createReactComponent.js +++ b/packages/lucide-react/src/createReactComponent.js @@ -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)), diff --git a/packages/lucide-react/tests/__snapshots__/lucide-react.spec.js.snap b/packages/lucide-react/tests/__snapshots__/lucide-react.spec.js.snap index 2504abcf3..dba35b755 100644 --- a/packages/lucide-react/tests/__snapshots__/lucide-react.spec.js.snap +++ b/packages/lucide-react/tests/__snapshots__/lucide-react.spec.js.snap @@ -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`] = `""`; +exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `""`; -exports[`Using lucide icon components should render an component 1`] = `""`; +exports[`Using lucide icon components should render an component 1`] = `""`; diff --git a/packages/lucide-vue-next/src/createVueComponent.js b/packages/lucide-vue-next/src/createVueComponent.js index 65ee7c09a..2a4195921 100644 --- a/packages/lucide-vue-next/src/createVueComponent.js +++ b/packages/lucide-vue-next/src/createVueComponent.js @@ -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, - }, + width: props.size || defaultAttributes.width, + height: props.size || defaultAttributes.height, + class: ['lucide', `lucide-${toKebabCase(iconName)}`], ...context.attrs, ...props, }, diff --git a/packages/lucide-vue-next/tests/__snapshots__/lucide-vue-next.spec.js.snap b/packages/lucide-vue-next/tests/__snapshots__/lucide-vue-next.spec.js.snap index 84adb88b0..38ccb1d10 100644 --- a/packages/lucide-vue-next/tests/__snapshots__/lucide-vue-next.spec.js.snap +++ b/packages/lucide-vue-next/tests/__snapshots__/lucide-vue-next.spec.js.snap @@ -160,6 +160,7 @@ VueWrapper { data-v-app="" > { ...attrs, }; - const classNames = combineClassNames(['lucide', elementAttrs, attrs]); + const classNames = combineClassNames(['lucide', `lucide-${iconName}`, elementAttrs, attrs]); if (classNames) { iconAttrs.class = classNames; diff --git a/packages/lucide/tests/__snapshots__/lucide.spec.js.snap b/packages/lucide/tests/__snapshots__/lucide.spec.js.snap index 060a860a7..7eafea505 100644 --- a/packages/lucide/tests/__snapshots__/lucide.spec.js.snap +++ b/packages/lucide/tests/__snapshots__/lucide.spec.js.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`createIcons should add custom attributes 1`] = `""`; +exports[`createIcons should add custom attributes 1`] = `""`; -exports[`createIcons should read elements from DOM and replace it with icons 1`] = `""`; +exports[`createIcons should read elements from DOM and replace it with icons 1`] = `""`; diff --git a/packages/lucide/tests/lucide.spec.js b/packages/lucide/tests/lucide.spec.js index 5b797e0d4..60a55b1e1 100644 --- a/packages/lucide/tests/lucide.spec.js +++ b/packages/lucide/tests/lucide.spec.js @@ -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 = ``; const attrs = { - class: 'lucide icon custom-class', + class: 'lucide lucide-volume-2 icon custom-class', fill: 'black', };