Script to clean unused icons in ionic

cleanIcon.js

#!/bin/env node
let path = require('path'), fs=require('fs');

function fromDir(startPath, filter, callback){

    if (!fs.existsSync(startPath)){
        console.log("no dir ",startPath);
        return;
    }

    let files = fs.readdirSync(startPath);
    for (let i = 0; i < files.length; i++) {
        let filename = path.join(startPath,files[i]);
        let stat = fs.lstatSync(filename);
        if (stat.isDirectory()) {
            fromDir(filename, filter, callback); //recurse
        }
        else if (filter.test(filename)) {
            callback(filename, files[i])
        }
    }
}

function justPrint(filePath, fileName){
    console.log('-- found: ', fileName.split('.')[0]);
}

let iconNames = []
function addTolist(filePath, fileName) {
    iconNames.push({
        iconName: fileName.split('.')[0],
        filePath,
        used: false
    })
}

function checkIfUnsused(filePath, fileName) {
    let data = fs.readFileSync(filePath)
    iconNames.forEach((icon, index, iconList) => {
        if (data.includes(`["name","${icon.iconName}"]`) || // for Angular 8 / view engine
            data.includes(`"name","${icon.iconName}"`) || // for Angular 9+ / ivy
            data.includes(`name:"${icon.iconName}"`) || 
            data.includes(`icon:"${icon.iconName}"`) || 
            data.includes(`"backButtonIcon","${icon.iconName}"`)) { // for stenciljs
            console.log('--- icon used', icon.iconName)
            iconList[index].used = true;
        }
    })
}

fromDir('www/svg',/\.svg$/, justPrint);
fromDir('www/svg',/\.svg$/, addTolist);
fromDir('www',/\.(js|css|html)$/, checkIfUnsused);

iconNames.forEach((icon) => {
    if(!icon.used){
        console.log('--- will delete unused icon', icon.iconName)
        fs.unlink(icon.filePath, (err) => {
            if (err) {
                console.error(err);
            }
        })
    }
})

At line 40, where it checks for the icon name on files:

if(data.includes(`${icon.iconName}`)){

It may detect some icon names from other strings created by the compiled files (or even from template strings in there).

Searching a little more inside the js compiled files generated from the build process, another way to target icon names usage specifically is:

if (data.includes(`["name","${icon.iconName}"]`)){ // for Angular 8 / view engine

if (data.includes(`"name","${icon.iconName}"`)){ // for Angular 9+ / ivy

And thank you for the script! Added it to the build:after hook in my Ionic config file.

Thanks a lot for the enhancement. I will update this

And line 41, please add

data.includes(`name:"${icon.iconName}"`) || data.includes(`icon:"${icon.iconName}"`) || data.includes(`"backButtonIcon","${icon.iconName}"`) // for stenciljs

Thank you

And line 41, please add

data.includes(`name:"${icon.iconName}"`) || data.includes(`icon:"${icon.iconName}"`) || data.includes(`"backButtonIcon","${icon.iconName}"`) // for stenciljs

Thank you

@anonimusprogramus Updated the script.
Thanks

Thanks for this script!
In case someone can use our approach:
https://github.com/rodekruis/cash-program-design-wizard/pull/356/files

In our version of the script I use a hard-coded list of icons in the angular.json-file, which should be updated manually every time you use a new icon (unfortunately), but the new list will be generated for you, so it's easy to fix when forgotten.

With the explicit list of icons there, all other icons will never be copied to the www/svg-folder, so no need to delete anything.

Hope it can help someone else.

I know it's been a long time but thank you @nucklehead and to all contributors to this script, kudos to you all 🙏🏼