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.

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:

Standard

// Standard - imports mapped against index file and type file.
import { IconCaretUp } from '@datadayrepos/icons'

// Standard direct - imports mapped against individual file and type - maps into long list in package.json file
import IconClose from '@datadayrepos/icons/IconClose'

Dynamic

This supports async imports by variable names. Requires building a dedicated function to map a list of icon imports against variable keys.

// 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
}

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

Adding Icons

Add file as svg in the svg folder. Keep the naming pattern, descriptive, informative, and ends 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

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

pnpm dedupeSvg

Webview:

• updates webview page based on any edits in src/svg folder

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

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

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.

pnpm folderToSvg

TODOs

• small script for naming rules when importing files directly