diff --git a/dist/icons/outline/DocumentPlus.d.ts b/dist/icons/outline/DocumentPlus.d.ts deleted file mode 100644 index 2faa051..0000000 --- a/dist/icons/outline/DocumentPlus.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from "react"; -import { IconProps } from "@/types"; -export declare const DocumentPlus: React.ForwardRefExoticComponent>; -export default DocumentPlus; diff --git a/dist/icons/outline/DocumentPlus.js b/dist/icons/outline/DocumentPlus.js deleted file mode 100644 index 54d0835..0000000 --- a/dist/icons/outline/DocumentPlus.js +++ /dev/null @@ -1 +0,0 @@ -import*as e from"react";const r=e.forwardRef((({color:r="currentColor",...t},o)=>e.createElement("svg",{...t,ref:o,width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true","data-slot":"icon"},e.createElement("path",{fill:r,"stroke-linecap":"round","stroke-linejoin":"round",d:"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"}))));export{r as DocumentPlus,r as default}; diff --git a/dist/icons/outline/index.d.ts b/dist/icons/outline/index.d.ts deleted file mode 100644 index 225aa7d..0000000 --- a/dist/icons/outline/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export { DocumentPlus } from "./DocumentPlus"; diff --git a/dist/icons/outline/index.js b/dist/icons/outline/index.js deleted file mode 100644 index d074e37..0000000 --- a/dist/icons/outline/index.js +++ /dev/null @@ -1 +0,0 @@ -export{DocumentPlus}from"./DocumentPlus.js"; diff --git a/dist/icons/solid/DocumentPlus.d.ts b/dist/icons/solid/DocumentPlus.d.ts deleted file mode 100644 index 2faa051..0000000 --- a/dist/icons/solid/DocumentPlus.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from "react"; -import { IconProps } from "@/types"; -export declare const DocumentPlus: React.ForwardRefExoticComponent>; -export default DocumentPlus; diff --git a/dist/icons/solid/DocumentPlus.js b/dist/icons/solid/DocumentPlus.js deleted file mode 100644 index eae1ffe..0000000 --- a/dist/icons/solid/DocumentPlus.js +++ /dev/null @@ -1 +0,0 @@ -import*as e from"react";const a=e.forwardRef((({color:a="currentColor",...t},l)=>e.createElement("svg",{...t,ref:l,width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true","data-slot":"icon"},e.createElement("path",{fill:a,"fill-rule":"evenodd",d:"M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875ZM12.75 12a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V18a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V12Z","clip-rule":"evenodd"}),e.createElement("path",{fill:a,d:"M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z"}))));export{a as DocumentPlus,a as default}; diff --git a/dist/icons/solid/index.d.ts b/dist/icons/solid/index.d.ts deleted file mode 100644 index 225aa7d..0000000 --- a/dist/icons/solid/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export { DocumentPlus } from "./DocumentPlus"; diff --git a/dist/icons/solid/index.js b/dist/icons/solid/index.js deleted file mode 100644 index d074e37..0000000 --- a/dist/icons/solid/index.js +++ /dev/null @@ -1 +0,0 @@ -export{DocumentPlus}from"./DocumentPlus.js"; diff --git a/dist/index.d.ts b/dist/index.d.ts deleted file mode 100644 index a452d0c..0000000 --- a/dist/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * as OutlineIcons from "./icons/outline"; -export * as SolidIcons from "./icons/solid"; diff --git a/dist/index.js b/dist/index.js index 71f92fa..114d09f 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,4 +1 @@ -import * as o from "./icons/outline/index.js"; -export { o as OutlineIcons }; -import * as s from "./icons/solid/index.js"; -export { s as SolidIcons }; +module.exports=new Proxy({},{get:(o,e)=>{if("__esModule"===e)return{};throw new Error("Importing from 'via-icons' directly is not supported. Please import from either 'via-icons/solid' or 'via-icons/outline' instead.")}}); diff --git a/dist/outline/DocumentPlusIcon.d.ts b/dist/outline/DocumentPlusIcon.d.ts new file mode 100644 index 0000000..e96785e --- /dev/null +++ b/dist/outline/DocumentPlusIcon.d.ts @@ -0,0 +1,13 @@ +import * as React from 'react'; +interface IconProps extends React.SVGAttributes { + children?: never; + color?: string; +} +/** + * The DocumentPlus icon is used to represent the action of adding a new document. + * + * @usage + * Use this icon in buttons, links, or other UI elements where the user can create a new document. + */ +export declare const DocumentPlusIcon: React.ForwardRefExoticComponent>; +export {}; diff --git a/dist/outline/index.d.ts b/dist/outline/index.d.ts new file mode 100644 index 0000000..6d15887 --- /dev/null +++ b/dist/outline/index.d.ts @@ -0,0 +1 @@ +export { DocumentPlusIcon } from './DocumentPlusIcon'; diff --git a/dist/outline/index.js b/dist/outline/index.js new file mode 100644 index 0000000..20bb1f3 --- /dev/null +++ b/dist/outline/index.js @@ -0,0 +1 @@ +import*as e from"react";const o=e.forwardRef((({color:o="currentColor",...r},t)=>e.createElement("svg",{...r,ref:t,xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon"},e.createElement("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"}))));o.displayName="DocumentPlusIcon";export{o as DocumentPlusIcon}; diff --git a/dist/solid/DocumentPlusIcon.d.ts b/dist/solid/DocumentPlusIcon.d.ts new file mode 100644 index 0000000..e96785e --- /dev/null +++ b/dist/solid/DocumentPlusIcon.d.ts @@ -0,0 +1,13 @@ +import * as React from 'react'; +interface IconProps extends React.SVGAttributes { + children?: never; + color?: string; +} +/** + * The DocumentPlus icon is used to represent the action of adding a new document. + * + * @usage + * Use this icon in buttons, links, or other UI elements where the user can create a new document. + */ +export declare const DocumentPlusIcon: React.ForwardRefExoticComponent>; +export {}; diff --git a/dist/solid/index.d.ts b/dist/solid/index.d.ts new file mode 100644 index 0000000..6d15887 --- /dev/null +++ b/dist/solid/index.d.ts @@ -0,0 +1 @@ +export { DocumentPlusIcon } from './DocumentPlusIcon'; diff --git a/dist/solid/index.js b/dist/solid/index.js new file mode 100644 index 0000000..0392e13 --- /dev/null +++ b/dist/solid/index.js @@ -0,0 +1 @@ +import*as e from"react";const a=e.forwardRef((({color:a="currentColor",...r},t)=>e.createElement("svg",{...r,ref:t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true","data-slot":"icon"},e.createElement("path",{"fill-rule":"evenodd",d:"M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875ZM12.75 12a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V18a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V12Z","clip-rule":"evenodd"}),e.createElement("path",{d:"M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z"}))));a.displayName="DocumentPlusIcon";export{a as DocumentPlusIcon}; diff --git a/dist/types/index.d.ts b/dist/types/index.d.ts deleted file mode 100644 index 1c64867..0000000 --- a/dist/types/index.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import * as React from "react"; -export interface IconProps extends React.SVGAttributes { - children?: never; - color?: string; -} diff --git a/package.json b/package.json index c51b174..6afcff1 100644 --- a/package.json +++ b/package.json @@ -1,52 +1,40 @@ { "name": "via-icons", - "version": "1.0.0", + "version": "1.0.1", "description": "", "type": "module", - "main": "dist/index.js", - "types": "dist/index.d.ts", "sideEffects": false, "files": [ "dist" ], "exports": { - ".": { - "require": { - "import": "./dist/index.js", - "types": "./dist/index.d.ts" - }, - "import": { - "import": "./dist/index.js", - "types": "./dist/index.d.ts" - } - }, "./outline": { "require": { - "import": "./dist/icons/outline/index.js", - "types": "./dist/icons/outline/index.d.ts" + "import": "./dist/outline/index.js", + "types": "./dist/outline/index.d.ts" }, "import": { - "import": "./dist/icons/outline/index.js", - "types": "./dist/icons/outline/index.d.ts" + "import": "./dist/outline/index.js", + "types": "./dist/outline/index.d.ts" } }, "./solid": { "require": { - "import": "./dist/icons/solid/index.js", - "types": "./dist/icons/solid/index.d.ts" + "import": "./dist/solid/index.js", + "types": "./dist/solid/index.d.ts" }, "import": { - "import": "./dist/icons/solid/index.js", - "types": "./dist/icons/solid/index.d.ts" + "import": "./dist/solid/index.js", + "types": "./dist/solid/index.d.ts" } } }, "license": "ISC", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", + "generate-icons": "node scripts/generateIcons.js", "rollupPrebuild": "rimraf dist", "rollupBuildProd": "rollup -c --environment NODE_ENV:production", - "deploy": "git pull origin main && yarn rollupPrebuild && yarn rollupBuildProd && git add . && yarn version --patch && git push origin main && git push origin main --tags" + "deploy": "pnpm rollupPrebuild && pnpm rollupBuildProd && git add . && npm version --patch && git push origin main && git push origin main --tags" }, "keywords": [], "author": "", diff --git a/rollup.config.js b/rollup.config.js index 04d11bd..93f1a6d 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,47 +1,75 @@ -import fs from "fs"; -import path from "path"; import typescript from "@rollup/plugin-typescript"; -import babel from "@rollup/plugin-babel"; import resolve from "@rollup/plugin-node-resolve"; import commonjs from "@rollup/plugin-commonjs"; import { terser } from "rollup-plugin-terser"; +import alias from "@rollup/plugin-alias"; +import path from "path"; +import { fileURLToPath } from "url"; -const pkgPath = path.resolve("package.json"); -const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8")); +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); -const external = [ - ...Object.keys(pkg.dependencies || {}), - ...Object.keys(pkg.peerDependencies || {}), - /@babel\/runtime/, -]; +const projectRootDir = path.resolve(__dirname); -const rollupConfig = { - input: "src/index.ts", - output: { - dir: "dist", - format: "esm", - sourcemap: false, - preserveModules: true, - preserveModulesRoot: "src", +export default [ + { + input: "src/index.ts", + output: [ + { + file: "dist/index.js", + format: "es", + sourcemap: false, + }, + ], + plugins: [ + alias({ + entries: [ + { find: "@", replacement: path.resolve(projectRootDir, "src") }, + ], + }), + resolve(), + commonjs(), + typescript({ + tsconfig: "./tsconfig.json", + declaration: true, + declarationDir: "dist", + rootDir: "src", + outDir: "dist", + }), + terser(), + ], + external: ["react"], }, - external, - plugins: [ - resolve(), - commonjs(), - typescript({ - tsconfig: "./tsconfig.json", - declaration: true, - noEmitOnError: true, - importHelpers: true, - }), - babel({ - extensions: [".js", ".ts"], - babelHelpers: "runtime", - include: ["src/**/*"], - plugins: ["@babel/plugin-transform-runtime"], - }), - terser(), - ], -}; - -export default rollupConfig; + { + input: { + solid: "src/solid/index.ts", + outline: "src/outline/index.ts", + }, + output: [ + { + dir: "dist", + format: "es", + sourcemap: false, + entryFileNames: "[name]/index.js", + }, + ], + plugins: [ + alias({ + entries: [ + { find: "@", replacement: path.resolve(projectRootDir, "src") }, + ], + }), + resolve(), + commonjs(), + typescript({ + tsconfig: "./tsconfig.json", + declaration: true, + declarationDir: "dist", + rootDir: "src", + outDir: "dist", + }), + terser(), + ], + external: ["react"], + }, +]; diff --git a/scripts/generateIcons.js b/scripts/generateIcons.js new file mode 100644 index 0000000..b9d03d4 --- /dev/null +++ b/scripts/generateIcons.js @@ -0,0 +1,104 @@ +import fs from "fs"; +import path from "path"; +import { optimize } from "svgo"; +import { fileURLToPath } from "url"; +import { dirname } from "path"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); + +const svgoConfig = { + plugins: [ + { name: "removeTitle", active: true }, + { name: "removeAttrs", params: { attrs: "(data-name)" } }, + { name: "removeDimensions", active: true }, + { name: "convertColors", params: { currentColor: true } }, + ], +}; + +const iconMetadataPath = path.resolve(__dirname, "./iconMetadata.json"); +const iconMetadata = JSON.parse(fs.readFileSync(iconMetadataPath, "utf-8")); + +const generateIconComponent = (name, svgContent, description, usage) => ` +import * as React from 'react'; + +interface IconProps extends React.SVGAttributes { + children?: never; + color?: string; +} + +/** + * ${description} + * + * @usage + * ${usage} + */ +export const ${name}Icon = React.forwardRef( + ({ color = 'currentColor', ...props }, forwardedRef) => { + return ( + ${svgContent.replace(" { + const exports = components + .map((name) => `export { ${name}Icon } from './${name}Icon';`) + .join("\n"); + const indexPath = path.resolve(__dirname, `../src/${iconType}/index.ts`); + fs.writeFileSync(indexPath, exports, "utf-8"); +}; + +const processIcons = async (iconType) => { + const svgDir = path.resolve(__dirname, `../src/svgs/${iconType}`); + const componentDir = path.resolve(__dirname, `../src/${iconType}`); + + if (!fs.existsSync(componentDir)) { + fs.mkdirSync(componentDir, { recursive: true }); + } + + const components = []; + + const files = fs.readdirSync(svgDir); + + for (const file of files) { + const filePath = path.resolve(svgDir, file); + const svgContent = fs.readFileSync(filePath, "utf-8"); + const { data } = await optimize(svgContent, svgoConfig); + + const componentName = file + .replace(".svg", "") + .replace(/(^\w|-\w)/g, clearAndUpper); + const metadata = iconMetadata[componentName]; + if (!metadata) { + console.error(`Metadata for ${componentName} not found`); + continue; + } + + components.push(componentName); + const componentContent = generateIconComponent( + componentName, + data, + metadata.description, + metadata.usage + ); + + const componentPath = path.resolve( + componentDir, + `${componentName}Icon.tsx` + ); + fs.writeFileSync(componentPath, componentContent, "utf-8"); + } + + generateIndexFile(components, iconType); +}; + +const clearAndUpper = (text) => text.replace(/-/, "").toUpperCase(); + +(async () => { + await processIcons("solid"); + await processIcons("outline"); +})(); diff --git a/scripts/iconMetadata.json b/scripts/iconMetadata.json new file mode 100644 index 0000000..2c88753 --- /dev/null +++ b/scripts/iconMetadata.json @@ -0,0 +1,10 @@ +{ + "DocumentPlus": { + "description": "The DocumentPlus icon is used to represent the action of adding a new document.", + "usage": "Use this icon in buttons, links, or other UI elements where the user can create a new document." + }, + "Icon2": { + "description": "The Icon2 icon represents a generic action or item.", + "usage": "Use this icon in scenarios where a general action needs to be indicated, such as settings or preferences." + } +} diff --git a/src/icons/outline/DocumentPlus.tsx b/src/icons/outline/DocumentPlus.tsx deleted file mode 100644 index ed6acc1..0000000 --- a/src/icons/outline/DocumentPlus.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from "react"; -import { IconProps } from "@/types"; - -export const DocumentPlus = React.forwardRef( - ({ color = "currentColor", ...props }, forwardedRef) => { - return ( - - ); - } -); - -export default DocumentPlus; diff --git a/src/icons/outline/index.ts b/src/icons/outline/index.ts deleted file mode 100644 index 225aa7d..0000000 --- a/src/icons/outline/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { DocumentPlus } from "./DocumentPlus"; diff --git a/src/icons/solid/DocumentPlus.tsx b/src/icons/solid/DocumentPlus.tsx deleted file mode 100644 index 8c1f378..0000000 --- a/src/icons/solid/DocumentPlus.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from "react"; -import { IconProps } from "@/types"; - -export const DocumentPlus = React.forwardRef( - ({ color = "currentColor", ...props }, forwardedRef) => { - return ( - - ); - } -); - -export default DocumentPlus; diff --git a/src/icons/solid/index.ts b/src/icons/solid/index.ts deleted file mode 100644 index 225aa7d..0000000 --- a/src/icons/solid/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { DocumentPlus } from "./DocumentPlus"; diff --git a/src/index.ts b/src/index.ts index a452d0c..c27d97b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,2 +1,14 @@ -export * as OutlineIcons from "./icons/outline"; -export * as SolidIcons from "./icons/solid"; +module.exports = new Proxy( + {}, + { + get: (_, property) => { + if (property === "__esModule") { + return {}; + } + + throw new Error( + `Importing from 'via-icons' directly is not supported. Please import from either 'via-icons/solid' or 'via-icons/outline' instead.` + ); + }, + } +); diff --git a/src/outline/DocumentPlusIcon.tsx b/src/outline/DocumentPlusIcon.tsx new file mode 100644 index 0000000..5df5837 --- /dev/null +++ b/src/outline/DocumentPlusIcon.tsx @@ -0,0 +1,23 @@ + +import * as React from 'react'; + +interface IconProps extends React.SVGAttributes { + children?: never; + color?: string; +} + +/** + * The DocumentPlus icon is used to represent the action of adding a new document. + * + * @usage + * Use this icon in buttons, links, or other UI elements where the user can create a new document. + */ +export const DocumentPlusIcon = React.forwardRef( + ({ color = 'currentColor', ...props }, forwardedRef) => { + return ( + + ); + } +); + +DocumentPlusIcon.displayName = 'DocumentPlusIcon'; diff --git a/src/outline/index.ts b/src/outline/index.ts new file mode 100644 index 0000000..28f8da5 --- /dev/null +++ b/src/outline/index.ts @@ -0,0 +1 @@ +export { DocumentPlusIcon } from './DocumentPlusIcon'; \ No newline at end of file diff --git a/src/solid/DocumentPlusIcon.tsx b/src/solid/DocumentPlusIcon.tsx new file mode 100644 index 0000000..d400cca --- /dev/null +++ b/src/solid/DocumentPlusIcon.tsx @@ -0,0 +1,23 @@ + +import * as React from 'react'; + +interface IconProps extends React.SVGAttributes { + children?: never; + color?: string; +} + +/** + * The DocumentPlus icon is used to represent the action of adding a new document. + * + * @usage + * Use this icon in buttons, links, or other UI elements where the user can create a new document. + */ +export const DocumentPlusIcon = React.forwardRef( + ({ color = 'currentColor', ...props }, forwardedRef) => { + return ( + + ); + } +); + +DocumentPlusIcon.displayName = 'DocumentPlusIcon'; diff --git a/src/solid/index.ts b/src/solid/index.ts new file mode 100644 index 0000000..28f8da5 --- /dev/null +++ b/src/solid/index.ts @@ -0,0 +1 @@ +export { DocumentPlusIcon } from './DocumentPlusIcon'; \ No newline at end of file diff --git a/src/types/index.ts b/src/types/index.ts deleted file mode 100644 index 66ed684..0000000 --- a/src/types/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -import * as React from "react"; - -export interface IconProps extends React.SVGAttributes { - children?: never; - color?: string; -} diff --git a/tsconfig.json b/tsconfig.json index 7ccd00a..0346867 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,25 +1,22 @@ { "compilerOptions": { - "allowSyntheticDefaultImports": true, - "noFallthroughCasesInSwitch": true, - "noUnusedParameters": true, - "noImplicitReturns": true, - "moduleResolution": "node", - "esModuleInterop": true, - "noUnusedLocals": true, - "declaration": true, - "outDir": "./dist", - "declarationDir": "./dist", - "target": "esnext", - "module": "esnext", - "jsx": "react", - "strict": false, - "noImplicitAny": false, - "baseUrl": ".", + "baseUrl": "./", "paths": { "@/*": ["src/*"] - } + }, + "outDir": "./dist", + "declaration": true, + "declarationDir": "./dist", + "emitDeclarationOnly": true, + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "module": "ESNext", + "target": "ESNext", + "jsx": "react", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true }, - "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"], - "exclude": ["node_modules", "dist"] + "include": ["src/**/*.tsx", "src/**/*.ts"] }