Move proicons package

Author: ProCode-Software

.vscode/settings.json

@@ -3,6 +3,12 @@
     "vue.server.includeLanguages": [
         "vue"
     ],
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
     "npm.packageManager": "bun",
     "npm.scriptRunner": "bun"
 }

README.md

@@ -66,7 +66,7 @@
         </td>
         <td>
             <a href="https://procode-software.github.io/proicons/docs/javascript-api">Documentation</a> | 
-            <a href="https://github.com/ProCode-Software/proicons/tree/main/src">GitHub</a>
+            <a href="https://github.com/ProCode-Software/proicons/tree/main/packages/proicons">GitHub</a>
         </td>
     </tr>
     <tr>

ROADMAP.md

@@ -1,15 +1,18 @@
 # ProIcons Roadmap
-This project is a work in progress and still has some things incomplete. Here are some things that are currently being planned for this project. Note that this list is subject to change and items can be added or removed.
+Here are some things that are currently being planned for this project. Note that this list is subject to change and items can be added or removed.
 
-## Icon Browser
-An online browser to view all icons in the package, available on https://procode-software.github.io/proicons/icons.
+## Website Redesign
+Redesign the homepage, and possibly the rest of the website.
 
 ## Figma Plugin
-[*Available in preview*](https://github.com/ProCode-Software/proicons-figma)
+**Available in preview:** https://github.com/ProCode-Software/proicons-figma
 
 A Figma plugin that will allow you to add ProIcons into your design. It will also have the ability to automatically update ProIcons in your file.
 
 The plugin source code is available in the [proicons-figma](https://github.com/ProCode-Software/proicons-figma) repository and will be published to Figma Community in the future.
 
 ## Roblox Plugin
-A free and open-source plugin will be available to download for copying and adding icons into your game.
+> [!IMPORTANT]
+> Due to Roblox API changes, new icons aren't being uploaded to Roblox.
+
+~~A free and open-source plugin will be available to download for copying and adding icons into your game.~~

bin/addIconFiles.ts

@@ -14,7 +14,7 @@ import lockfile from '../icons/icons.lock.json' with { type: 'json' }
 import { createSvgNodes } from './build/createSvgNodes.ts'
 import { getCliParams } from './helpers/getCliParam.ts'
 import { prettierFormat } from './helpers/prettierFormat.ts'
-import { camelCase, kebabCase, pascalCase } from './helpers/rename.ts'
+import { camelCase, kebabCase, pascalCase } from '@proicons/shared'
 
 const __dirname = fileURLToPath(dirname(import.meta.url))
 const __rootdir = resolve(__dirname, '../')
@@ -36,9 +36,7 @@ if (shouldCleanDir) rmSync(outDir, { recursive: true, force: true })
 if (!existsSync(outDir) || shouldCleanDir) mkdirSync(outDir, { recursive: true })
 
 const files = readdirSync(inDir)
-
-/** @type {{ name: string, path: string, friendlyName: string }[]} */
-const modules = []
+const modules: { name: string, path: string, friendlyName: string }[] = []
 
 if (files.length !== Object.keys(icons).length)
     throw new Error(
@@ -123,12 +121,11 @@ Promise.all(
         )
     }
     if (shouldCreateDataFiles) {
-        const formatAndWrite = async (data, file) => {
+        const formatAndWrite = async (data: any, file: string) => {
             const formatted = await prettierFormat(
                 'export default ' + JSON.stringify(data) + ' as const',
                 'babel-ts'
             )
-
             writeFileSync(resolve(process.cwd(), 'src', file), formatted)
         }
 

bin/build.ts

@@ -10,7 +10,7 @@ import pkg from '../package.json' with { type: 'json' }
 import { buildFont } from './build/build-font.ts'
 import { prettierFormat } from './helpers/prettierFormat.ts'
 import convertPathToRect from '@proicons/svgo-plugins/convertPathToRect'
-import * as rename from './helpers/rename.ts'
+import * as rename from '@proicons/shared'
 import { type Config as SVGOConfig } from 'svgo'
 
 const __rootdir = resolve(import.meta.dirname, '../')
@@ -140,7 +140,8 @@ function createLockfile() {
     const config: IconsJSON = JSON.parse(readFileSync(iconsJsonPath, 'utf-8'))
 
     Object.keys(config).forEach(friendlyName => {
-        const lockfileItem: LockfileItem = lockfile.icons[friendlyName as keyof typeof lockfile.icons]
+        const lockfileItem: LockfileItem =
+            lockfile.icons[friendlyName as keyof typeof lockfile.icons]
 
         if (!lockfileItem) {
             lockfile.icons[friendlyName] = {

bin/build/build-font.ts

@@ -57,7 +57,7 @@ export async function buildFont(rebuild: boolean) {
             fontHeight: 500,
             codepoints,
             templates: {
-                html: path.resolve('tools/data/html-font.hbs'),
+                html: path.resolve('./bin/build/templates/codepoints.hbs'),
             },
             fontTypes: [
                 FontAssetType.TTF,

bin/build/createSvgNodes.ts

@@ -7,10 +7,9 @@ export function createSvgNodes(svg: string): IconNode[] {
     const svgElement = parser.window.document.querySelector('svg')
 
     function renderNodeList(element: Element): IconNode[] {
-        const nodeArray = []
-
+        const nodeArray: IconNode[] = []
         for (const child of element.children) {
-            const nodeItem = [
+            const nodeItem: IconNode = [
                 child.tagName,
                 child.attributes.length > 0
                     ? Object.fromEntries(
@@ -21,7 +20,6 @@ export function createSvgNodes(svg: string): IconNode[] {
             ]
             nodeArray.push(nodeItem)
         }
-
         return nodeArray
     }
     return renderNodeList(svgElement)

tools/data/html-font.hbs bin/build/templates/codepoints.hbstools/data/html-font.hbs renamed to bin/build/templates/codepoints.hbs

@@ -1,28 +1,37 @@
-import icons from '../../../icons/icons.json' with { type: 'json' }
-import lockfile from '../../../icons/icons.lock.json' with { type: 'json' }
-import { camelCase, pascalCase } from '../../helpers/rename.ts'
+import _ic from '../../../icons/icons.json' with { type: 'json' }
+import _lf from '../../../icons/icons.lock.json' with { type: 'json' }
+import { camelCase, DeprecatedIcon, Icon, Lockfile, pascalCase } from '@proicons/shared'
+import { LockfileIcon, IconsJSON } from '@proicons/shared'
 
 export type Node = import('../createSvgNodes.ts').IconNode
 
+export interface IconData {
+    pascalName: string
+    camelName: string
+    friendlyName: string
+    lockfileItem: LockfileIcon
+    iconData: Icon
+    deprecationData: DeprecatedIcon
+    /** Base64 SVG data */
+    rawSvgData: string
+}
+
+const lockfile: Lockfile = _lf
+const icons: IconsJSON = _ic
+
 /**
  * Gets information about an icon
  */
 export function getData(moduleName: string) {
     const pascalName = moduleName.replace(/Icon$/, '')
     const friendlyName = Object.keys(icons).find(key => pascalCase(key) == pascalName)
+    if (!friendlyName) throw new Error(`Icon ${friendlyName} not found`)
     const camelName = camelCase(friendlyName)
 
-    if (!friendlyName) {
-        throw new Error(`Icon ${camelName} not found`)
-    }
-
-    const lockfileItem: (typeof lockfile.icons)[keyof typeof lockfile.icons] =
-        lockfile.icons[friendlyName]
-
-    const iconData: typeof icons.Add = icons[friendlyName]
-
-    /** @type {{version: string, alternative: string}?} */
-    const deprecationData = lockfile.deprecated?.[friendlyName]
+    const lockfileItem: LockfileIcon = lockfile.icons[friendlyName]
+    const iconData: Icon = icons[friendlyName]
+    const deprecationData: DeprecatedIcon | undefined =
+        lockfile.deprecated?.[friendlyName]
 
     const rawSvgData = Buffer.from(
         iconData.icon.trim().replace(/currentColor/g, '#ffffff')
@@ -35,7 +44,6 @@ export function getData(moduleName: string) {
         lockfileItem,
         iconData,
         deprecationData,
-        /** Base64 SVG data */
         rawSvgData,
     }
 }

bin/build/templates/templateData.ts

@@ -2,7 +2,7 @@ import { writeFileSync } from 'fs'
 import { resolve } from 'path'
 import lockfile from '../icons/icons.lock.json' with { type: 'json' }
 import pkg from '../package.json' with { type: 'json' }
-import { kebabCase } from './helpers/rename.ts'
+import { kebabCase } from '@proicons/shared'
 const { version } = pkg
 
 const shouldWrite = process.argv.includes('-w') || process.argv.includes('--write')