Merge pull request #14 from benflap/dev

Add `class` to type declarations

.prettierrc

@@ -2,5 +2,6 @@
     "trailingComma": "es5",
     "tabWidth": 4,
     "semi": true,
-    "singleQuote": false
+    "singleQuote": false,
+    "plugins": ["prettier-plugin-svelte"]
 }

CHANGELOG.md

@@ -1,5 +1,9 @@
 # tabler-icons-svelte changelog
 
+### 1.9.1
+
+-   fix missing type declaration for `class` prop
+
 ## 1.9.0
 
 -   Support passing down `class` prop ([#10](https://github.com/benflap/tabler-icons-svelte/pull/10))

README.md

@@ -59,14 +59,14 @@ If your build times are high, import the components from their svelte files.
 
 ## Props
 
-The components each accept 3 props:
-
-| Prop        | Default        |
-| ----------- | -------------- |
-| size        | 24             |
-| color       | `currentColor` |
-| strokeWidth | 2              |
-| class       | `""`           |
+The components each accept 4 optional props:
+
+| Prop        | Default        | Description                                                                              |
+| ----------- | -------------- | ---------------------------------------------------------------------------------------- |
+| size        | 24             | The size of the Icon. Measured in pixels if no other unit is passed.                     |
+| color       | `currentColor` | Any valid CSS [\<color\>](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). |
+| strokeWidth | 2              | The SVG's stroke width. Measured in pixels if no other unit is passed.                   |
+| class       | `undefined`    | Classes that are passed down to the SVG.                                                 |
 
 ## Development Workflow
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tabler-icons-svelte",
-    "version": "1.9.0",
+    "version": "1.9.1",
     "description": "Tabler Icons as svelte components.",
     "license": "MIT",
     "author": "Ben Lapp <[email protected]>",
@@ -13,11 +13,12 @@
     "main": "index.js",
     "types": "index.d.ts",
     "scripts": {
-        "build": "node ./scripts/generate.cjs"
+        "build": "node ./scripts/generate.js"
     },
     "devDependencies": {
         "@tabler/icons": "1.84.0",
-        "prettier": "^2.2.1"
+        "prettier": "^2.8.2",
+        "prettier-plugin-svelte": "^2.9.0"
     },
     "peerDependencies": {
         "svelte": ">=3.31.0 <=4"

scripts/generate.cjs → scripts/generate.js

@@ -1,15 +1,17 @@
-const fs = require("fs");
-const path = require("path");
-const prettier = require("prettier");
+import fs from "node:fs";
+import path, { dirname } from "node:path";
+import prettier, { format } from "prettier";
+import { fileURLToPath } from "node:url";
 
-const { format } = prettier;
+const __dirname = dirname(fileURLToPath(import.meta.url));
 
 const SOURCE_ICONS_PATH = path.resolve(
     __dirname,
     "../node_modules/@tabler/icons/icons/"
 );
 const DIST_PATH = path.resolve(__dirname, "../");
 const DESTINATION_ICONS_PATH = path.resolve(__dirname, "../icons");
+const TYPES_PATH = path.resolve(DIST_PATH, "types");
 
 const prettierOptions = prettier.resolveConfig(__dirname);
 
@@ -62,9 +64,7 @@ function createComponentName(originalName) {
 }
 
 function removeOldComponents() {
-    const components = fs
-        .readdirSync(DESTINATION_ICONS_PATH)
-        .filter((file) => file.endsWith(".svelte"));
+    const components = fs.readdirSync(DESTINATION_ICONS_PATH);
     for (const file of components) {
         fs.unlinkSync(path.join(DESTINATION_ICONS_PATH, file));
     }
@@ -92,7 +92,7 @@ async function generateNewComponents() {
 
         fs.writeFileSync(
             path.resolve(DESTINATION_ICONS_PATH, `${componentName}.svelte`),
-            format(source, { parser: "html", ...(await prettierOptions) })
+            format(source, { parser: "svelte", ...(await prettierOptions) })
         );
     }
 }
@@ -119,13 +119,7 @@ async function createTypesFile() {
         const [originalName] = file.split(".");
         const componentName = createComponentName(originalName);
 
-        return `\
-            export class ${componentName} extends SvelteComponentTyped<{
-                color?: string;
-                size?: string | number;
-                strokeWidth?: string | number;
-            }> {}\
-        `;
+        return `export class ${componentName} extends TablerIcon {}`;
     });
 
     fs.writeFileSync(

scripts/types-template.d.ts

@@ -1 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+
+type TablerIconProps = {
+    color?: string;
+    size?: string | number;
+    strokeWidth?: string | number;
+    class?: string;
+};
+
+class TablerIcon extends SvelteComponentTyped<TablerIconProps> {}