diff --git a/README.md b/README.md index 74bd63bf9..60cb95f8f 100644 --- a/README.md +++ b/README.md @@ -97,10 +97,10 @@ Add an icon to be displayed on your page with the following markup (`activity` i ### React -Import the icon and render it in your component. You can adjust SVG properties through React props: +React components available through [`@tabler/icons-react`](https://www.npmjs.com/package/@tabler/icons-react) package. ```jsx -import { IconAward } from '@tabler/icons'; +import { IconAward } from '@tabler/icons-react'; const MyComponent = () => { return { } ``` -`@tabler/icons` exports it's own type declarations for usage with React and Typescript. +`@tabler/icons-react` exports it's own type declarations for usage with React and Typescript. + +For more details, see the [documentation](https://github.com/tabler/tabler-icons/tree/master/packages/icons-react). + +### Vue + +Vue components available through [`@tabler/icons-vue`](https://www.npmjs.com/package/@tabler/icons-vue) package. + +```vue + + + +``` + +For more details, see the [documentation](https://github.com/tabler/tabler-icons/tree/master/packages/icons-vue). + ### Angular @@ -155,31 +179,7 @@ After importing the _IconsModule_ in your feature or shared module, use the icon For more usage documentation refer to [the official documentation](https://github.com/pierreavn/angular-tabler-icons). -### Vue - -Vue components available through [`vue-tabler-icons`](https://www.npmjs.com/package/vue-tabler-icons) package. -Install the package, import the icon component and render it in your component. You can adjust SVG properties by passing regular HTML attributes: - -```html - - - -``` - -`vue-tabler-icons` exports it's own type declarations for usage with Typescript. - -For more usage documentation refer to [the official documentation](https://github.com/alex-oleshkevich/vue-tabler-icons). - -### CDN +## CDN All files included in `@tabler/icons` npm package are available over a CDN. diff --git a/packages/icons-react/build.mjs b/packages/icons-react/build.mjs index df3232be6..0fb8bd3a7 100644 --- a/packages/icons-react/build.mjs +++ b/packages/icons-react/build.mjs @@ -21,7 +21,7 @@ import { SVGAttributes } from 'react' declare module '@tabler/icons-react' // Create interface extending SVGProps -export interface TablerIconsProps extends Partial> { +export interface TablerIconsProps extends Partial, 'stroke'>> { size?: string | number, stroke?: string | number } diff --git a/packages/icons-vue/README.md b/packages/icons-vue/README.md index 25a73019f..7466513d6 100644 --- a/packages/icons-vue/README.md +++ b/packages/icons-vue/README.md @@ -47,7 +47,7 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases). ## How to use -All icons are Svelte components that contain SVG elements. So any icon can be imported and used as a component. It also helps to use threeshaking, so you only import the icons you use. +All icons are Vue components that contain SVG elements. So any icon can be imported and used as a component. It also helps to use threeshaking, so you only import the icons you use. ```vue