@datadayrepos/icons 0.0.1-beta.20 → 0.0.1-beta.22

package/README.md

@@ -1,39 +1,73 @@
-# Minimal icon library
+# Flexible vue icon library
+The primary purpose is to support both dynamic and static import syntaxes for consumers of datadayrepos - and to provide a consistent base icon library.
 
-```bash
-pnpm i
+We also encopurage use of icon imports through the vite tooling system and 'unplugins' - but those will not resolve dynamic (variable based) imports which are sometimes usefull and the original rationale for this library.
 
+Especially supporting dynamic async imports turned out to be quite difficult with existing libraries.
 
-```
+Library is designed for vuejs apps. It requires Vite and rollup to get the build to run correctly.
 
+Typed.
 
+## Import in new project
+This will add the latest version of the package to your project's package.json and install it in the node_modules directory.
 ```bash
-# this creates vue fiels from the svg fiels. the vue dir is not commtted to git. 
- pnpm  build-icons
+pnpm add @datadayrepos/icons@latest
+# or
+npm i @datadayrepos/icons@latest
 ```
-## Ways to call
-### standard
-import {IconCaretUp} from '@datadayrepos/icons' 
-import IconClose from '@datadayrepos/icons/IconClose' 
 
-### dynamic
-import {iconResolver}from '../iconresolver'
-const Whatever=iconResolver("IconClose")
+## Usage
 
----
-import  { defineAsyncComponent } from 'vue'
+All imports are tree shakeable. The imported icon is a vue component.
+Different syntaxes are supported:
 
- type ComponentLoader = Record<string, ReturnType<typeof defineAsyncComponent>>;
+### Standard
+```ts
+// Standard - imports mapped against index file and type file.
+import { IconCaretUp } from '@datadayrepos/icons'
+```
+
+```ts
+// Standard direct - imports mapped against individual file and type - maps into long list in package.json file
+import IconClose from '@datadayrepos/icons/IconClose'
+```
 
- const componentMap:ComponentLoader = {
+### Dynamic
+This supports async imports by variable names. 
+Requires building a dedicated function to map a list of icon imports against variable keys.
+```ts
+// iconresolver.ts
+import { defineAsyncComponent } from 'vue'
+
+type ComponentLoader = Record<string, ReturnType<typeof defineAsyncComponent>>
+
+const componentMap: ComponentLoader = {
   IconClose: defineAsyncComponent(() => import('@datadayrepos/icons/IconClose')),
 
-};
+}
 
 export function iconResolver(iconName: string) {
-  return componentMap[iconName] ? componentMap[iconName] : null;
-
+  return componentMap[iconName] ? componentMap[iconName] : null
 }
+```
+
+```ts
+// usage.ts
+import { iconResolver } from '../iconresolver'
+
+const Whatever = iconResolver('IconClose')
+```
+
+## Web view
+There is a web html file inside "view". This can be launched in vscode directly to view all icons.
+For example, right click on file, 'launch web server'
+
+The file gives:
+- visual representation of the icon
+- name
+- import syntax copy buttons
+- copy the svg content
 
 ## Package structure
 dist/
@@ -47,21 +81,85 @@ dist/
   index.js
   index.d.ts
 
-## Drafts
+## Dev and Build
+There are some principles here:
+- All source icons are as svg files in src/svg
+- All src/vue files are autogenerated - editing is futile
+- Package.json export list is autogenerated - editing is futile
+- Changing an icon name is a breaking change
+- Naming nomeclature:
+  - Descritive littral naming
+  - To separatefrom other components in alarge project:
+    - All names have first charater capitilized
+    - All names are CamelCase
+    - All names end with 'Icon'
+
+### Tooling helpers
+There are several dev tools here.
+
+Build:
+- Dynamically creates vue files from the svg files
+- Builds index.ts file
+- Updates package json
+- Builds dist package including types
 
-footnoteIcon
-positionIcon
-visibilityIcon
-closeIcon
-cancelIcon
+```bash
+pnpm build
+# this creates vue files from the svg files. the vue dir is not commtted to git. 
+pnpm build-icons
+```
 
-equallarger
-equalless
-multiple
-largerthan
-lessthan
+Dups:
+- Checks src/svg folder for duplicate svg files.
+- Dups are simply console logged for manual check and delete
 
+```bash
+pnpm dedupeSvg
+```
+
+Webview:
+- updates webview page based on any edits in src/svg folder
+
+```bash
+pnpm createView
+```
+
+Import vue files:
+New named vue file in template sntax containing a svg can be imported in batch.
+- Put filed in folder dev/single
+- run pnpm convertVueSvg
+- this fixes the syntax to a clean svg and saves file with same original filename in src/svg
+- If there is a conflict with existing filename the import is ignored and console.logged
+- IMPORTANT: Destructive operation. All successfully imported file are deleted from dev/single
+
+```bash
+pnpm convertVueSvg
+```
+
+Rename folders:
+For use when adding 'named' folders. 
+- Checks ad changes first character to CSP
+- Checks and sets last word to 'Icon'
+- IMPORTANT: Will change folder names in dev/folder
+
+```bash
+pnpm renameFolders
+```
+
+Import folder system
+Helper to import icons in folder systems.
+- Takes all folders in dev/folders
+- Assumes foldername is new icon name
+- Finds 'index.vue' file, and creates svg file named as the folder
+- IMPORTANT: Deletes successfull imports. Ignores name folders that result in a name conflict.
+
+```bash
+pnpm folderToSvg
+```
 
+## TODOs
+- small script for naming rules when importing files directly
+- 
 
 
 

package/package.json

@@ -1,9 +1,16 @@
 {
   "name": "@datadayrepos/icons",
   "type": "module",
-  "version": "0.0.1-beta.20",
+  "version": "0.0.1-beta.22",
   "private": false,
-  "license": "Proprietary",
+  "packageManager": "pnpm@8.9.0",
+  "description": "Uix icon library",
+  "author": "datadayrepos",
+  "license": "Apache 2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/datadayrepos/dataday-icons.git"
+  },
   "exports": {
     ".": {
       "module": "./dist/index.js",
@@ -718,6 +725,9 @@
       "types": "./dist/ZoomInIcon/index.vue.d.ts"
     }
   },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -732,7 +742,7 @@
     "typecheckVue": "vue-tsc --noEmit",
     "typeBuildVue": "vue-tsc --declaration --emitDeclarationOnly",
     "pub": "npm publish --access public",
-    "convertVyeSvg": "node dev-vuetosvg.cjs",
+    "convertVueSvg": "node dev-vuetosvg.cjs",
     "renameFolders": "node dev-renamefolder.cjs",
     "folderToSvg": "node dev-foldertosvg.cjs",
     "createView": "node dev-createView.cjs",
@@ -771,4 +781,4 @@
       "eslint --cache --fix"
     ]
   }
-}
+}