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.

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
pnpm add @datadayrepos/icons@latest

or

npm i @datadayrepos/icons@latest
`

Usage

All imports are tree shakeable. The imported icon is a vue component.
Different syntaxes are supported:

$3

`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'
`

$3


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>

const componentMap: ComponentLoader = {
IconClose: defineAsyncComponent(() => import('@datadayrepos/icons/IconClose')),

}

export function iconResolver(iconName: string) {
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/
IconCaretDown/
index.js
index.vue.d.ts
IconCaretUp/
index.js
index.vue.d.ts
...other icons...
index.js
index.d.ts

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'

$3

Add file as svg in the svg folder. Keep the naming pattern, descriptive, informative, and ends with "Icon"

$3

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

`bash
pnpm build

this creates vue files from the svg files. Doesnt run typescript o rbuild

pnpm build-icons

MANUALLY update package version before publishing

pnpm pub

Commit to git manually or by uix

git add .
git commit -m "Added icons"
git push

`

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
-