fix: stroke prop no longer works after 2.0 update (#470)

2025-09-02 10:24:07 +02:00 · 2023-01-25 23:26:11 +01:00
parent 510f416376
commit 25cda0db68
25 changed files with 82 additions and 35 deletions
--- a/packages/icons-preact/README.md
+++ b/packages/icons-preact/README.md
@@ -65,6 +65,14 @@ You can pass additional props to adjust the icon.
 <IconArrowDown color="red" size={48} />
 ```

+### Props
+
+| name          | type     | default      |
+| ------------- | -------- | ------------ |
+| `size`        | _Number_ | 24           |
+| `color`       | _String_ | currentColor |
+| `stroke`      | _Number_ | 2            |
+
 ## Contributing

 For more info on how to contribute please see the [contribution guidelines](https://github.com/tabler/tabler-icons/blob/main/CONTRIBUTING.md).
--- a/packages/icons-preact/src/createPreactComponent.js
+++ b/packages/icons-preact/src/createPreactComponent.js
@@ -2,7 +2,7 @@ import { h, toChildArray } from 'preact';
 import defaultAttributes from './defaultAttributes';

 export default (iconName, iconNamePascal, iconNode) => {
-  const Component = ({ color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }) =>
+  const Component = ({ color = 'currentColor', size = 24, stroke = 2, children, ...rest }) =>
      h(
          'svg',
          {
@@ -10,7 +10,7 @@ export default (iconName, iconNamePascal, iconNode) => {
            width: size,
            height: size,
            stroke: color,
-            'stroke-width': strokeWidth,
+            'stroke-width': stroke,
            class: `tabler-icon tabler-icon-${iconName}`,
            ...rest,
          },
--- a/packages/icons-preact/test.spec.jsx
+++ b/packages/icons-preact/test.spec.jsx
@@ -18,8 +18,8 @@ describe("Preact Icon component", () => {
      <IconActivity
        data-testid={testId}
        size={48}
-        stroke="red"
-        strokeWidth={4}
+        color="red"
+        stroke={4}
        className={"icon-class"}
      />
    );
--- a/packages/icons-react/README.md
+++ b/packages/icons-react/README.md
@@ -65,6 +65,14 @@ You can pass additional props to adjust the icon.
 <IconArrowLeft color="red" size={48} />
 ```

+### Props
+
+| name          | type     | default      |
+| ------------- | -------- | ------------ |
+| `size`        | _Number_ | 24           |
+| `color`       | _String_ | currentColor |
+| `stroke`      | _Number_ | 2            |
+
 ## Contributing

 For more info on how to contribute please see the [contribution guidelines](https://github.com/tabler/tabler-icons/blob/main/CONTRIBUTING.md).
--- a/packages/icons-react/build.mjs
+++ b/packages/icons-react/build.mjs
@@ -22,7 +22,8 @@ declare module '@tabler/icons-react'

 // Create interface extending SVGProps
 export interface TablerIconsProps extends Partial<React.SVGProps<SVGSVGElement>> {
-    size?: string | number
+    size?: string | number,
+    stroke?: string | number
 }

 export declare const createReactComponent: (iconName: string, iconNamePascal: string, iconNode: any[]) => (props: TablerIconsProps) => JSX.Element;
--- a/packages/icons-react/package.json
+++ b/packages/icons-react/package.json
@@ -35,7 +35,8 @@
    "test": "echo 'ok'"
  },
  "dependencies": {
-    "@tabler/icons": "2.0.0"
+    "@tabler/icons": "2.0.0",
+    "prop-types": "^15.7.2"
  },
  "devDependencies": {
    "@testing-library/react": "^11.2.6",
@@ -46,7 +47,6 @@
    "react-dom": "^17.0.2"
  },
  "peerDependencies": {
-    "prop-types": "^15.7.2",
    "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
  }
 }
--- a/packages/icons-react/src/createReactComponent.js
+++ b/packages/icons-react/src/createReactComponent.js
@@ -4,7 +4,7 @@ import defaultAttributes from './defaultAttributes';

 export default (iconName, iconNamePascal, iconNode) => {
  const Component = forwardRef(
-      ({ color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }, ref) =>
+      ({ color = 'currentColor', size = 24, stroke = 2, children, ...rest }, ref) =>
          createElement(
              'svg',
              {
@@ -13,7 +13,7 @@ export default (iconName, iconNamePascal, iconNode) => {
                width: size,
                height: size,
                stroke: color,
-                strokeWidth,
+                strokeWidth: stroke,
                className: `tabler-icon tabler-icon-${iconName}`,
                ...rest,
              },
@@ -24,7 +24,7 @@ export default (iconName, iconNamePascal, iconNode) => {
  Component.propTypes = {
    color: PropTypes.string,
    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    strokeWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    stroke: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  };

  Component.displayName = `${iconNamePascal}`;
--- a/packages/icons-solidjs/README.md
+++ b/packages/icons-solidjs/README.md
@@ -65,6 +65,14 @@ You can pass additional props to adjust the icon.
 <IconArrowRight color="red" size={48} />
 ```

+### Props
+
+| name          | type     | default      |
+| ------------- | -------- | ------------ |
+| `size`        | _Number_ | 24           |
+| `color`       | _String_ | currentColor |
+| `stroke`      | _Number_ | 2            |
+
 ## Contributing

 For more info on how to contribute please see the [contribution guidelines](https://github.com/tabler/tabler-icons/blob/main/CONTRIBUTING.md).
--- a/packages/icons-solidjs/src/createSolidComponent.js
+++ b/packages/icons-solidjs/src/createSolidComponent.js
@@ -7,7 +7,7 @@ const createSolidComponent = (iconName, iconNamePascal, iconNode) => {
    const [localProps, rest] = splitProps(props, [
      'color',
      'size',
-      'strokeWidth',
+      'stroke',
      'children',
      'class',
    ]);
@@ -17,7 +17,7 @@ const createSolidComponent = (iconName, iconNamePascal, iconNode) => {
      width: () => (localProps.size != null ? localProps.size : defaultAttributes.width),
      height: () => (localProps.size != null ? localProps.size : defaultAttributes.height),
      stroke: () => (localProps.color != null ? localProps.color : defaultAttributes.stroke),
-      'stroke-width': () => localProps.strokeWidth != null ? localProps.strokeWidth : defaultAttributes['stroke-width'],
+      'stroke-width': () => localProps.stroke != null ? localProps.stroke : defaultAttributes['stroke-width'],
      class: () => `tabler-icon tabler-icon-${iconName} ${localProps.class != null ? localProps.class : ''}`,
    };

--- a/packages/icons-svelte/README.md
+++ b/packages/icons-svelte/README.md
@@ -65,6 +65,14 @@ You can pass additional props to adjust the icon.
 <IconHeart size={48} strokeWidth={1} />
 ```

+### Props
+
+| name          | type     | default      |
+| ------------- | -------- | ------------ |
+| `size`        | _Number_ | 24           |
+| `color`       | _String_ | currentColor |
+| `stroke`      | _Number_ | 2            |
+
 ## Contributing

 For more info on how to contribute please see the [contribution guidelines](https://github.com/tabler/tabler-icons/blob/main/CONTRIBUTING.md).
--- a/packages/icons-svelte/build.mjs
+++ b/packages/icons-svelte/build.mjs
@@ -30,7 +30,7 @@ import { SvelteComponentTyped } from "svelte";
 interface IconProps extends Partial<svelte.JSX.SVGProps<SVGSVGElement>> {
  color?: string
  size?: number,
-  strokeWidth?: number,
+  stroke?: number,
  class?: string
 }

--- a/packages/icons-svelte/src/Icon.svelte
+++ b/packages/icons-svelte/src/Icon.svelte
@@ -3,7 +3,7 @@
  export let name
  export let color = 'currentColor'
  export let size = 24
-  export let strokeWidth = 2
+  export let stroke = 2
  export let iconNode
 </script>

@@ -13,7 +13,7 @@
  width={size}
  height={size}
  stroke={color}
-  stroke-width={strokeWidth}
+  stroke-width={stroke}
  class={`tabler-icon tabler-icon-${name} ${$$props.class ?? ''}`}
 >
  {#each iconNode as [tag, attrs]}
--- a/packages/icons-vue/README.md
+++ b/packages/icons-vue/README.md
@@ -71,6 +71,14 @@ You can pass additional props to adjust the icon.
 <IconHome color="red" :size="48" stroke-width="1" />
 ```

+### Props
+
+| name          | type     | default      |
+| ------------- | -------- | ------------ |
+| `size`        | _Number_ | 24           |
+| `color`       | _String_ | currentColor |
+| `stroke`      | _Number_ | 2            |
+
 ## Contributing

 For more info on how to contribute please see the [contribution guidelines](https://github.com/tabler/tabler-icons/blob/main/CONTRIBUTING.md).
--- a/packages/icons-vue/src/createVueComponent.js
+++ b/packages/icons-vue/src/createVueComponent.js
@@ -2,7 +2,7 @@ import { h } from 'vue';
 import defaultAttributes from './defaultAttributes';

 const createVueComponent = (iconName, iconNamePascal, iconNode) => (
-    { size, color, ...props },
+    { size, color, stroke, ...props },
    { attrs, slots }
 ) => {
  return h(
@@ -12,6 +12,7 @@ const createVueComponent = (iconName, iconNamePascal, iconNode) => (
        width: size || defaultAttributes.width,
        height: size || defaultAttributes.height,
        stroke: color || defaultAttributes.stroke,
+        strokeWidth: stroke || defaultAttributes['stroke-width'],
        ...attrs,
        class: ['tabler-icon', `tabler-icon-${iconName}`, attrs?.class || ''],
        ...props,
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -128,16 +128,16 @@ importers:
      '@testing-library/react': ^11.2.6
      babel-preset-react-app: ^10.0.0
      jest: ^26.6.3
-      prop-types: ^15.8.1
+      prop-types: ^15.7.2
      react: ^17.0.2
      react-dom: ^17.0.2
    dependencies:
      '@tabler/icons': link:../icons
+      prop-types: 15.8.1
    devDependencies:
      '@testing-library/react': 11.2.7_sfoxds7t5ydpegc3knd667wn6m
      babel-preset-react-app: 10.0.1
      jest: 26.6.3
-      prop-types: 15.8.1
      react: 17.0.2
      react-dom: 17.0.2_react@17.0.2

@@ -212,7 +212,7 @@ importers:
      '@babel/plugin-transform-react-jsx': ^7.20.7
      '@babel/plugin-transform-react-jsx-development': ^7.18.6
      '@preact/preset-vite': ^2.4.0
-      '@tabler/icons-preact': 2.0.0
+      '@tabler/icons-preact': '*'
      babel-plugin-transform-hook-names: ^1.0.2
      preact: ^10.11.3
      typescript: ^4.9.3
@@ -230,7 +230,7 @@ importers:

  test/test-react:
    specifiers:
-      '@tabler/icons-react': 2.0.0
+      '@tabler/icons-react': '*'
      '@types/react': ^18.0.26
      '@types/react-dom': ^18.0.9
      '@vitejs/plugin-react': ^3.0.0
@@ -252,7 +252,7 @@ importers:
  test/test-svelte:
    specifiers:
      '@sveltejs/vite-plugin-svelte': ^2.0.0
-      '@tabler/icons-svelte': 2.0.0
+      '@tabler/icons-svelte': '*'
      '@tsconfig/svelte': ^3.0.0
      svelte: ^3.54.0
      svelte-check: ^2.10.0
@@ -272,7 +272,7 @@ importers:

  test/test-vue:
    specifiers:
-      '@tabler/icons-vue': 2.0.0
+      '@tabler/icons-vue': '*'
      '@vitejs/plugin-vue': ^4.0.0
      typescript: ^4.9.3
      vite: ^4.0.0
@@ -11273,7 +11273,6 @@ packages:
  /object-assign/4.1.1:
    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
    engines: {node: '>=0.10.0'}
-    dev: true

  /object-copy/0.1.0:
    resolution: {integrity: sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==}
@@ -11870,7 +11869,7 @@ packages:
      loose-envify: 1.4.0
      object-assign: 4.1.1
      react-is: 16.13.1
-    dev: true
+    dev: false

  /proto-list/1.2.4:
    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
@@ -11995,7 +11994,7 @@ packages:

  /react-is/16.13.1:
    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-    dev: true
+    dev: false

  /react-is/17.0.2:
    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
--- a/test/test-preact/package.json
+++ b/test/test-preact/package.json
@@ -10,7 +10,7 @@
    "clean": "rm -rf dist"
  },
  "dependencies": {
-    "@tabler/icons-preact": "2.0.0",
+    "@tabler/icons-preact": "*",
    "preact": "^10.11.3"
  },
  "devDependencies": {
--- a/test/test-preact/public/vite.svg
+++ b/test/test-preact/public/vite.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/test/test-preact/src/app.tsx
+++ b/test/test-preact/src/app.tsx
@@ -12,7 +12,9 @@ export function App() {
      <a onClick={() => setActive(!active)}>
        {active ? <IconHeartFilled size={48} /> : <IconHeart size={48} />}
      </a>
-      <IconMoodSmile size={48} strokeWidth={1} />
+      <IconMoodSmile size={48} stroke={1} />
+      <IconMoodSmile size={48} stroke={1.5} />
+      <IconMoodSmile size={48} stroke={2} />
    </div>
  )
 }
--- a/test/test-react/package.json
+++ b/test/test-react/package.json
@@ -10,7 +10,7 @@
    "clean": "rm -rf dist"
  },
  "dependencies": {
-    "@tabler/icons-react": "2.0.0",
+    "@tabler/icons-react": "*",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
--- a/test/test-react/src/App.tsx
+++ b/test/test-react/src/App.tsx
@@ -10,7 +10,9 @@ function App() {
      <a onClick={() => setActive(!active)}>
        {active ? <IconHeartFilled size={48} /> : <IconHeart size={48} />}
      </a>
-      <IconMoodSmile size={48} strokeWidth={1} />
+      <IconMoodSmile size={48} stroke={1} />
+      <IconMoodSmile size={48} stroke={1.5} />
+      <IconMoodSmile size={48} stroke={2} />
    </div>
  )
 }
--- a/test/test-svelte/package.json
+++ b/test/test-svelte/package.json
@@ -11,7 +11,7 @@
    "clean": "rm -rf dist"
  },
  "dependencies": {
-    "@tabler/icons-svelte": "2.0.0"
+    "@tabler/icons-svelte": "*"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^2.0.0",
--- a/test/test-svelte/src/App.svelte
+++ b/test/test-svelte/src/App.svelte
@@ -11,6 +11,8 @@ let active = false;
      <IconHeart size={48} />
    {/if}
  </a>
-  <IconMoodSmile size={48} strokeWidth={1} />
+  <IconMoodSmile size={48} stroke={1} />
+  <IconMoodSmile size={48} stroke={1.5} />
+  <IconMoodSmile size={48} stroke={2} />
 </main>

--- a/test/test-vue/package.json
+++ b/test/test-vue/package.json
@@ -11,7 +11,7 @@
  },
  "dependencies": {
    "vue": "^3.2.45",
-    "@tabler/icons-vue": "2.0.0"
+    "@tabler/icons-vue": "*"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
--- a/test/test-vue/public/vite.svg
+++ b/test/test-vue/public/vite.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/test/test-vue/src/App.vue
+++ b/test/test-vue/src/App.vue
@@ -10,6 +10,8 @@ const active = ref(false)
    <IconHeartFilled v-if="active" size="48" />
    <IconHeart v-else size="48" />
  </a>
-  <IconMoodSmile size="48" stroke-width="1" />
+  <IconMoodSmile size="48" stroke="1" />
+  <IconMoodSmile size="48" stroke="1.5" />
+  <IconMoodSmile size="48" stroke="2" />
 </template>
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>