proicons 4.8.0 → 4.9.0

package/dist/umd/proicons.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"proicons.cjs","sources":["../../src/categories.ts","../../src/interfaces.ts","../../bin/rename.js","../../src/getIconInfo.ts","../../src/replace.ts","../../src/search.ts"],"sourcesContent":["import icons from './configs/tags.json'\r\n\r\n/** List of all icon categories */\r\nconst categories = Object.values(icons).map((item) => item.category).filter((value, index, self) => self.indexOf(value) === index)\r\n\r\nexport default categories","export interface ProIconReplaceConfig {\r\n    /** Determines the color of the icons. Defaults to `currentColor`. */\r\n    color: string,\r\n    /** Determines the default stroke width of the icon. Defaults to `1.5`. This only works on SVG elements with existing strokes; add `strokeFilledElements` for this property to affect such elements. */\r\n    strokeWidth: number,\r\n    /** Apply strokes to filled SVG elements, such as circles, by the provided amount with `1.5` (default stroke value) subtracted, if `strokeWidth` is set to a value above `1.5`. Defaults to `false`\r\n     * @example If `strokeWidth` is set to `2`, filled SVG elements will have an additional `0.5`px stroke\r\n     */\r\n    strokeFilledElements: boolean\r\n    /** Defaults to `round` */\r\n    strokeCaps: 'round' | 'square' | 'butt',\r\n    /** Defaults to `round` */\r\n    strokeJoin: 'round' | 'miter' | 'bevel',\r\n    /** Determines the corner radius of SVG elements. Does not apply to all rounded elements. */\r\n    cornerRadius: number,\r\n    /** The attribute name that is checked for when converting elements to icons. Defaults to `proicon`. */\r\n    attributeName: string,\r\n    /** Determines whether to overwrite elements when converting to icons. Setting this to `auto` will overwrite only if the element does not have any children. Defaults to `auto`. */\r\n    overwrite: boolean | 'auto',\r\n    /** Determines whether to apply existing HTMl attributes such as styles to the converted SVGs. Defaults to `true` */\r\n    useAttributes: false\r\n}\r\n\r\nexport class ProIconInfo {\r\n    name: string;\r\n    kebabCase: string;\r\n    camelCase: string;\r\n    element: SVGSVGElement;\r\n    category: string;\r\n    tags: string[];\r\n    /**\r\n     * \r\n     * @param name The name of the icon in Friendly Form\r\n     * @param kebabCase The name of the icon in kebab-case\r\n     * @param camelCase The name of the icon in camelCase\r\n     * @param element The icon as an `SVGSVGElement`. Use the `outerHTML` property on this to return the icon as a string.\r\n     * @param category The category of the icon.\r\n     * @param tags An array of the icon's tags.\r\n     */\r\n    constructor(\r\n        name: string,\r\n        kebabCase: string,\r\n        camelCase: string,\r\n        element: SVGSVGElement,\r\n        tags: string[],\r\n        category: string\r\n    ) {\r\n        this.name = name;\r\n        this.kebabCase = kebabCase;\r\n        this.camelCase = camelCase;\r\n        this.element = element;\r\n        this.category = category;\r\n        this.tags = tags;\r\n    }\r\n}","function removeParenthesis(str) {\r\n    return str.replace(/[()]/g, '')\r\n}\r\nfunction camelCase(str) {\r\n    return removeParenthesis(str).split(' ').map((word, i) => i == 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1)).join('')\r\n}\r\nfunction kebabCase(str) {\r\n    return removeParenthesis(str).replaceAll(' ', '-').toLowerCase()\r\n}\r\nexport default { camelCase, kebabCase };","import icons from './configs/icons.json';\r\nimport tags from './configs/tags.json';\r\nimport { ProIconInfo } from './interfaces';\r\nimport rename from '../bin/rename';\r\n\r\n/**\r\n * Returns information about an icon from the provided key.\r\n * Throws an error if the provided key does not match an icon name in Friendly Form, camelCase or kebab-case. Use the method `search` instead to return icons that contain a keyword inside its name or tags.\r\n * @param key The icon name in Friendly Form, camelCase or kebab-case. Throws an error if the provided key is invalid. Case-insensitive\r\n * @example The following keys are valid:\r\n * getIconInfo('Add Square')\r\n * getIconInfo('addSquare')\r\n * getIconInfo('add-square')\r\n */\r\nfunction getIconInfo(key: string): ProIconInfo {\r\n    let prop: string;\r\n\r\n    const isFriendly = (t: string) => t.toLowerCase() == key.toLowerCase();\r\n    const isKebab = (t: string) => rename.kebabCase(t.toLowerCase()) == rename.kebabCase(key.toLowerCase());\r\n    const isCamel = isFriendly\r\n\r\n    if (Object.keys(tags).some(isFriendly)) {\r\n        prop = rename.camelCase(Object.keys(tags).find(isFriendly));\r\n\r\n    } else if (Object.keys(tags).some(isKebab)) {\r\n        prop = rename.camelCase(Object.keys(tags).find(isKebab));\r\n\r\n    } else if (Object.keys(icons).some(isCamel)) {\r\n        // @ts-ignore\r\n        prop = Object.keys(icons).find(isCamel);\r\n\r\n    } else {\r\n        throw new Error(`Invalid icon key '${key}': Icon not found`);\r\n    }\r\n\r\n    const friendlyName = Object.keys(tags).find((t) => {\r\n        return rename.camelCase(t) == prop;\r\n    });\r\n\r\n    const domParser = new DOMParser();\r\n    const parsed = domParser.parseFromString(icons[prop], 'image/svg+xml');\r\n\r\n    const tagItem = tags[friendlyName]\r\n    const info = new ProIconInfo(\r\n        friendlyName, //friendly\r\n        rename.kebabCase(friendlyName), //kebab\r\n        prop, //camel\r\n        parsed.querySelector('svg'), //svg\r\n        tagItem.description?.split(',').map(m => m.trim()), //desc\r\n        tagItem.category, //tags\r\n    );\r\n    return info;\r\n}\r\n\r\nexport default getIconInfo","// @ts-nocheck\r\nimport getIconInfo from './getIconInfo'\r\nimport { ProIconReplaceConfig, ProIconInfo } from './interfaces';\r\n\r\n/**\r\n * Converts all elements with the `proicon` attribute (which can be customised in the config) on the page to an icon corresponding to the attribute value.\r\n * @param rootElm The element to search inside for children with the `proicon` attribute. Defaults to `document.body`.\r\n * @param config An optional configuration to customise the behaviour of the replace method\r\n */\r\nfunction replace(rootElm?: Element, config?: ProIconReplaceConfig): void {\r\n    if (!rootElm) rootElm = document.body;\r\n    const useAttrs = config?.useAttributes ?? true\r\n\r\n    const attr = config?.attributeName ?? 'proicon';\r\n    rootElm.querySelectorAll(`[${attr}]`).forEach((element) => {\r\n        let toReplace;\r\n        switch (config?.overwrite) {\r\n            case true: toReplace = true; break;\r\n            case false: toReplace = false; break;\r\n            case 'auto': toReplace = !element.hasChildNodes(); break;\r\n            default: toReplace = !element.hasChildNodes(); break;\r\n        }\r\n\r\n        let iconName = element.getAttribute(attr).trim()\r\n        let icon: SVGElement = getIconInfo(iconName).element\r\n\r\n        const attributeList = {\r\n            // HtmlAttribute, configKey, svgAttr\r\n            \"color\": [\"color\", [\"stroke\", 'fill']],\r\n            \"stroke-width\": [\"strokeWidth\", [\"stroke-width\"]],\r\n            \"join\": [\"strokeCaps\", [\"stroke-linejoin\"]],\r\n            \"caps\": [\"strokeJoin\", [\"stroke-linecap\"]],\r\n            \"corner-radius\": [\"cornerRadius\", [\"rx\"]],\r\n            \"outline\": [\"strokeFilledElements\", undefined]\r\n        }\r\n        if (config) {\r\n            Object.values(attributeList)\r\n                .map((v) => v[0])\r\n                .forEach((c, i) => {\r\n                    const htmlAttr = Object.keys(attributeList)[i];\r\n                    let valueToUse\r\n\r\n                    if (useAttrs && element.hasAttribute(htmlAttr)) {\r\n                        valueToUse = element.getAttribute(htmlAttr)\r\n                    } else if (config[c]) {\r\n                        valueToUse = config[c]\r\n                    }\r\n\r\n                    if (valueToUse) {\r\n                        element.setAttribute(htmlAttr, valueToUse);\r\n                    }\r\n                });\r\n        }\r\n        for (const attr of element.attributes) {\r\n            const name = attr.name.toLowerCase()\r\n            const value = attr.value\r\n\r\n            if (Object.hasOwn(attributeList, name)) {\r\n                if (name != 'outline') {\r\n                    if (value) {\r\n                        const n = attributeList[name][1]\r\n                        n.forEach(x => {\r\n                            icon.querySelectorAll(`[${x}]`).forEach(b => {\r\n                                b.setAttribute(x, value)\r\n                            })\r\n                        })\r\n                    }\r\n                } else {\r\n                    // Behaviour for outlining\r\n                    const defaultStrokeWidth = 1.5\r\n                    const unstrokedElms = Array.from(icon.querySelectorAll('*')).filter(f => !f.hasAttribute('stroke'))\r\n\r\n                    unstrokedElms.forEach(elm => {\r\n                        const reducedStroke = +element.getAttribute('stroke-width') - defaultStrokeWidth\r\n                        if (reducedStroke > 0) {\r\n                            elm.setAttribute('stroke', element.getAttribute('color') ?? 'currentColor')\r\n                            elm.setAttribute('stroke-width', reducedStroke)\r\n                            elm.setAttribute('stroke-linejoin', element.getAttribute('strokeJoin') ?? 'round')\r\n                            elm.setAttribute('stroke-linecap', element.getAttribute('strokeCaps') ?? 'round')\r\n                        }\r\n                    })\r\n                }\r\n            } else {\r\n                icon.setAttribute(name, value)\r\n            }\r\n        }\r\n\r\n\r\n        icon.classList.add('proicon')\r\n        icon.setAttribute('data-proicon-id', getIconInfo(iconName).kebabCase)\r\n\r\n        toReplace == true ? element.replaceWith(icon)\r\n            : element.insertBefore(icon, element.childNodes[0])\r\n    });\r\n}\r\n\r\nexport default replace\r\n","import getIconInfo from \"./getIconInfo\"\r\nimport tags from './configs/tags.json'\r\nimport icons from './configs/icons.json'\r\nimport { ProIconInfo } from \"./interfaces\"\r\n\r\n/** Searches for icons with names or tags that contain `key` and returns them as `ProIconInfo`. */\r\nfunction search(key: string): ProIconInfo[] {\r\n    const iconsAsInfo = Object.keys(icons).map((icon) => {\r\n        // Don't index the element\r\n        const j = getIconInfo(icon)\r\n        delete j.element\r\n        return j\r\n    })\r\n    const filtered = iconsAsInfo.filter((icon) => JSON.stringify(icon).includes(key))\r\n\r\n    return filtered\r\n}\r\n\r\nexport default search"],"names":["categories","icons","item","value","index","self","ProIconInfo","name","kebabCase","camelCase","element","tags","category","removeParenthesis","str","word","i","rename","getIconInfo","key","prop","isFriendly","t","isKebab","isCamel","friendlyName","parsed","tagItem","_a","m","replace","rootElm","config","useAttrs","attr","_b","toReplace","iconName","icon","attributeList","v","c","htmlAttr","valueToUse","x","b","f","elm","reducedStroke","_c","search","j"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/lib/categories.d.ts

@@ -1,2 +1,3 @@
+/** List of all icon categories */
 declare const categories: string[];
 export default categories;

package/lib/getIconInfo.d.ts

@@ -1,3 +1,12 @@
 import { ProIconInfo } from './interfaces';
+/**
+ * Returns information about an icon from the provided key.
+ * Throws an error if the provided key does not match an icon name in Friendly Form, camelCase or kebab-case. Use the method `search` instead to return icons that contain a keyword inside its name or tags.
+ * @param key The icon name in Friendly Form, camelCase or kebab-case. Throws an error if the provided key is invalid. Case-insensitive
+ * @example The following keys are valid:
+ * getIconInfo('Add Square')
+ * getIconInfo('addSquare')
+ * getIconInfo('add-square')
+ */
 declare function getIconInfo(key: string): ProIconInfo;
 export default getIconInfo;

package/lib/interfaces.d.ts

@@ -1,20 +1,40 @@
 export interface ProIconReplaceConfig {
+    /** Determines the color of the icons. Defaults to `currentColor`. */
     color: string;
+    /** Determines the default stroke width of the icon. Defaults to `1.5`. This only works on SVG elements with existing strokes; add `strokeFilledElements` for this property to affect such elements. */
     strokeWidth: number;
+    /** Apply strokes to filled SVG elements, such as circles, by the provided amount with `1.5` (default stroke value) subtracted, if `strokeWidth` is set to a value above `1.5`. Defaults to `false`
+     * @example If `strokeWidth` is set to `2`, filled SVG elements will have an additional `0.5`px stroke
+     */
     strokeFilledElements: boolean;
+    /** Defaults to `round` */
     strokeCaps: 'round' | 'square' | 'butt';
+    /** Defaults to `round` */
     strokeJoin: 'round' | 'miter' | 'bevel';
+    /** Determines the corner radius of SVG elements. Does not apply to all rounded elements. */
     cornerRadius: number;
+    /** The attribute name that is checked for when converting elements to icons. Defaults to `proicon`. */
     attributeName: string;
+    /** Determines whether to overwrite elements when converting to icons. Setting this to `auto` will overwrite only if the element does not have any children. Defaults to `auto`. */
     overwrite: boolean | 'auto';
+    /** Determines whether to apply existing HTMl attributes such as styles to the converted SVGs. Defaults to `true` */
     useAttributes: false;
 }
 export declare class ProIconInfo {
     name: string;
     kebabCase: string;
     camelCase: string;
-    element: SVGElement;
+    element: SVGSVGElement;
     category: string;
     tags: string[];
-    constructor(name: string, kebabCase: string, camelCase: string, element: SVGElement, tags: string[], category: string);
+    /**
+     *
+     * @param name The name of the icon in Friendly Form
+     * @param kebabCase The name of the icon in kebab-case
+     * @param camelCase The name of the icon in camelCase
+     * @param element The icon as an `SVGSVGElement`. Use the `outerHTML` property on this to return the icon as a string.
+     * @param category The category of the icon.
+     * @param tags An array of the icon's tags.
+     */
+    constructor(name: string, kebabCase: string, camelCase: string, element: SVGSVGElement, tags: string[], category: string);
 }

package/lib/proicons.d.ts

@@ -1,440 +1,8 @@
+import icons from './configs/icons.json';
+import categories from './categories';
 import replace from './replace';
 import getIconInfo from './getIconInfo';
 import search from './search';
-declare const _default: {
-    icons: {
-        add: string;
-        addCircular: string;
-        addRhombus: string;
-        addSquare: string;
-        addSquareMultiple: string;
-        "addSquareMultiple-Var": string;
-        appRemove: string;
-        apps: string;
-        appsAdd: string;
-        backspace: string;
-        cancel: string;
-        checkmark: string;
-        compose: string;
-        copy: string;
-        "copy-Var": string;
-        crop: string;
-        cut: string;
-        delete: string;
-        eye: string;
-        eyeOff: string;
-        fastFoward: string;
-        heart: string;
-        heartStylistic: string;
-        keyboardShift: string;
-        more: string;
-        moreVertical: string;
-        pause: string;
-        pencil: string;
-        play: string;
-        playCircular: string;
-        reverse: string;
-        search: string;
-        star: string;
-        tune: string;
-        checkmarkStarburst: string;
-        creditCard: string;
-        lock: string;
-        lockOpen: string;
-        shield: string;
-        shieldCancel: string;
-        shieldCheckmark: string;
-        shieldKeyhole: string;
-        chat: string;
-        cloud: string;
-        comment: string;
-        commentMultiple: string;
-        "commentMultiple-Var": string;
-        database: string;
-        databaseAdd: string;
-        globe: string;
-        mail: string;
-        mailOpen: string;
-        megaphone: string;
-        megaphoneLoud: string;
-        mention: string;
-        narrator: string;
-        person: string;
-        person2: string;
-        personAdd: string;
-        personAdd2: string;
-        personCircle: string;
-        personMultiple: string;
-        phoneAccept: string;
-        phoneHangUp: string;
-        send: string;
-        "wi-fi": string;
-        anchor: string;
-        attatch: string;
-        bookInfo2: string;
-        calendar: string;
-        diamond: string;
-        eraser: string;
-        eyedropper: string;
-        eyedropperColor: string;
-        flashlight: string;
-        gift: string;
-        hatGraduation: string;
-        highlighter: string;
-        hourglass: string;
-        layers: string;
-        lightbulb: string;
-        link: string;
-        microphone: string;
-        microphoneOff: string;
-        pin: string;
-        pinOff: string;
-        timer: string;
-        wrench: string;
-        alertCircle: string;
-        alertTriangle: string;
-        arrowSync: string;
-        arrowSync2: string;
-        badge: string;
-        bell: string;
-        cancelCircle: string;
-        cancelSquare: string;
-        checkmarkCircle: string;
-        clock: string;
-        doNotDisturb: string;
-        info: string;
-        prohibited: string;
-        spinner: string;
-        emoji: string;
-        emojiFrown: string;
-        emojiGrin: string;
-        emojiLaughter: string;
-        skull: string;
-        arrowClockwise: string;
-        arrowCounterclockwise: string;
-        arrowDown: string;
-        arrowDownload: string;
-        arrowEnter: string;
-        arrowExport: string;
-        arrowFoward: string;
-        arrowImport: string;
-        arrowLeft: string;
-        arrowMove: string;
-        arrowRedo: string;
-        arrowRedo2: string;
-        arrowReply: string;
-        arrowRight: string;
-        arrowRotateClockwise: string;
-        arrowRotateCounterclockwise: string;
-        arrowSort: string;
-        arrowSwap: string;
-        arrowTrending: string;
-        arrowUndo: string;
-        arrowUndo2: string;
-        arrowUp: string;
-        arrowUpDown: string;
-        arrowUpload: string;
-        chevronDown: string;
-        chevronLeft: string;
-        chevronRight: string;
-        chevronUp: string;
-        subtract: string;
-        document: string;
-        drawText: string;
-        note: string;
-        noteAdd: string;
-        quote: string;
-        spacebar: string;
-        symbols: string;
-        text: string;
-        textAdd: string;
-        textAlignCenter: string;
-        textAlignJustify: string;
-        textAlignLeft: string;
-        textAlignRight: string;
-        textBold: string;
-        textCaseLowercase: string;
-        textCaseTitle: string;
-        textCaseUppercase: string;
-        textClearFormatting: string;
-        textCollapse: string;
-        textColor: string;
-        textEditStyle: string;
-        textEffects: string;
-        textExpand: string;
-        textFont: string;
-        textFontSize: string;
-        textFootnote: string;
-        textHighlightColor: string;
-        textIndentDecrease: string;
-        textIndentIncrease: string;
-        textItalic: string;
-        textLarge: string;
-        textLetterSpacing: string;
-        textLineHeight: string;
-        textLineSpacing: string;
-        textNumberList: string;
-        textPositionBottom: string;
-        textPositionMiddle: string;
-        textPositionTop: string;
-        textSmall: string;
-        textStrikethrough: string;
-        textSubscript: string;
-        textSuperscript: string;
-        textTypography: string;
-        textUnderline: string;
-        file: string;
-        fileAdd: string;
-        fileSync: string;
-        folder: string;
-        folderAdd: string;
-        folderOpen: string;
-        hardDrive: string;
-        pdf: string;
-        pdf2: string;
-        photo: string;
-        qrCode: string;
-        save: string;
-        saveAs: string;
-        accessibility: string;
-        battery: string;
-        batteryFull: string;
-        button: string;
-        checkboxIntermediate2: string;
-        checkboxUnchecked: string;
-        checkmarkChecked: string;
-        checkmarkIntermediate: string;
-        closedCaptions: string;
-        cursor: string;
-        cursorClick: string;
-        darkTheme: string;
-        extension: string;
-        menu: string;
-        settings: string;
-        zoomIn: string;
-        zoomOut: string;
-        airplane: string;
-        airplaneLanding: string;
-        airplaneTakeoff: string;
-        beach: string;
-        buildingMultiple: string;
-        component: string;
-        directions: string;
-        home: string;
-        home2: string;
-        location: string;
-        map: string;
-        museum: string;
-        vehicleCar: string;
-        barGraph: string;
-        boxMargins: string;
-        clipboard: string;
-        clipboardPaste: string;
-        clipboardSearch: string;
-        compareSize: string;
-        grid: string;
-        gridDots: string;
-        layout: string;
-        pageMargins: string;
-        panelLeft: string;
-        panelLeftContract: string;
-        panelLeftExpand: string;
-        panelLeftOpen: string;
-        panelRight: string;
-        panelRightContract: string;
-        panelRightExpand: string;
-        table: string;
-        tableSimple: string;
-        backgroundColor: string;
-        borderAll: string;
-        colorPalette: string;
-        mask: string;
-        paintBucket: string;
-        paintbrush: string;
-        paintbrush2: string;
-        shapeDifference: string;
-        shapeIntersect: string;
-        shapeSubtract: string;
-        shapeUnion: string;
-        strokeThickness: string;
-        arrowMaximize: string;
-        arrowMinimize: string;
-        chromeRestore: string;
-        "chromeRestore-Var": string;
-        contractDown: string;
-        expand: string;
-        fullScreenMaximize: string;
-        fullScreenMinimize: string;
-        open: string;
-        pictureInPicture: string;
-        pictureInPicture2: string;
-        pictureInPictureEnter: string;
-        pictureInPictureExit: string;
-        window: string;
-        windowMultiple: string;
-        "windowMultiple-Var": string;
-        beaker: string;
-        braces: string;
-        bracesVariable: string;
-        branch: string;
-        branchCompare: string;
-        branchFork: string;
-        branchFork2: string;
-        bug: string;
-        code: string;
-        gitCommit: string;
-        script: string;
-        script2: string;
-        terminal: string;
-        videoClip: string;
-        arc: string;
-        circle: string;
-        circleSmall: string;
-        cornerRadius: string;
-        hexagon: string;
-        lineDiagonal: string;
-        octagon: string;
-        pentagon: string;
-        rectangleWide: string;
-        rhombus: string;
-        square: string;
-        triangle: string;
-        backgroundColorAccent: string;
-        eyedropperColorAccent: string;
-        highlighterAccent: string;
-        paintBucketAccent: string;
-        tagAccent: string;
-        textColorAccent: string;
-        textHighlightColorAccent: string;
-        amazon: string;
-        appStore: string;
-        apple: string;
-        bluetooth: string;
-        css: string;
-        facebook: string;
-        figma: string;
-        github: string;
-        google: string;
-        google2: string;
-        googleChrome: string;
-        googlePlay: string;
-        html: string;
-        instagram: string;
-        javascript: string;
-        microsoft: string;
-        microsoftEdge: string;
-        python: string;
-        roblox: string;
-        tiktok: string;
-        visualStudioCode: string;
-        xTwitter: string;
-        youtube: string;
-        youtubeShorts: string;
-        book: string;
-        book2: string;
-        bookAdd: string;
-        bookAdd2: string;
-        bookInfo: string;
-        bookOpen: string;
-        box: string;
-        broom: string;
-        calligraphyPen: string;
-        cart: string;
-        compass: string;
-        flag: string;
-        library: string;
-        photoFilter: string;
-        ribbon: string;
-        ribbonStar: string;
-        video: string;
-        briefcase: string;
-        briefcase2: string;
-        cent: string;
-        dollar: string;
-        graph: string;
-        toolbox: string;
-        cake: string;
-        coffeeHot: string;
-        cookies: string;
-        drop: string;
-        hamburger: string;
-        boxDrag: string;
-        cursorDrag: string;
-        hand: string;
-        thumbsDown: string;
-        thumbsUp: string;
-        angle: string;
-        calculator: string;
-        hash: string;
-        ruler: string;
-        screenSize: string;
-        headphones: string;
-        movie: string;
-        musicNote: string;
-        musicNote2: string;
-        soundwave: string;
-        volume: string;
-        volume0: string;
-        volume1: string;
-        volumeMute: string;
-        leaf: string;
-        leafThree: string;
-        leafTwo: string;
-        history: string;
-        question: string;
-        questionCircle: string;
-        sparkle: string;
-        alignBottom: string;
-        alignHorizontalCenters: string;
-        alignLeft: string;
-        alignRight: string;
-        alignTop: string;
-        alignVerticalCenters: string;
-        appsList: string;
-        archive: string;
-        archiveAdd2: string;
-        board: string;
-        bookmark: string;
-        bookmarkAdd: string;
-        bookmarkMultiple: string;
-        "bookmarkMultiple-Var": string;
-        centerHorizontal: string;
-        centerVertical: string;
-        filter: string;
-        filter2: string;
-        filterCancel: string;
-        filterCancel2: string;
-        sectionBreak: string;
-        tag: string;
-        tagMultiple: string;
-        "tagMultiple-Var": string;
-        taskList: string;
-        textBulletList: string;
-        textBulletListSquare: string;
-        textBulletListSquareAdd: string;
-        camera: string;
-        computer: string;
-        computerMac: string;
-        foldableHorizontal: string;
-        foldableHorizontalHalf: string;
-        foldableVertical: string;
-        foldableVerticalHalf: string;
-        game: string;
-        keyboard: string;
-        laptop: string;
-        motherboard: string;
-        phone: string;
-        printer: string;
-        tv: string;
-        tablet: string;
-        watch: string;
-        brightness: string;
-        moon: string;
-        weatherCloudy: string;
-    };
-    replace: typeof replace;
-    getIconInfo: typeof getIconInfo;
-    categories: string[];
-    search: typeof search;
-};
-export default _default;
+export { 
+/** List of all available icons with camelCase keys and SVG strings as values. */
+icons, replace, getIconInfo, categories, search };

package/lib/replace.d.ts

@@ -1,3 +1,8 @@
 import { ProIconReplaceConfig } from './interfaces';
+/**
+ * Converts all elements with the `proicon` attribute (which can be customised in the config) on the page to an icon corresponding to the attribute value.
+ * @param rootElm The element to search inside for children with the `proicon` attribute. Defaults to `document.body`.
+ * @param config An optional configuration to customise the behaviour of the replace method
+ */
 declare function replace(rootElm?: Element, config?: ProIconReplaceConfig): void;
 export default replace;

package/lib/search.d.ts

@@ -1,3 +1,4 @@
 import { ProIconInfo } from "./interfaces";
+/** Searches for icons with names or tags that contain `key` and returns them as `ProIconInfo`. */
 declare function search(key: string): ProIconInfo[];
 export default search;