Actualiser Icons
76
Icons.md
76
Icons.md
@@ -1,6 +1,76 @@
|
|||||||
# Icons
|
# Icons
|
||||||
|
|
||||||
Used icons are coming from the following opensource repositories
|
## Icon used
|
||||||
|
|
||||||
- black icons: [tabler-icons](https://github.com/tabler/tabler-icons)
|
- black icons: tabler-icons
|
||||||
- colored icons: ?
|
- colored icons: flat-color-icons
|
||||||
|
|
||||||
|
The icons have been extracted from the following repo: https://github.com/iconify/icon-sets.git.
|
||||||
|
|
||||||
|
## The javascript script
|
||||||
|
|
||||||
|
To generate the icons from the repo, install the following javascript module
|
||||||
|
|
||||||
|
`npm install @iconify/tools`
|
||||||
|
|
||||||
|
Then a script needs to be executed (see below)
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const { getIconData, iconToSVG } = require('@iconify/utils');
|
||||||
|
|
||||||
|
// CONFIGURATION
|
||||||
|
const SOURCE_DIR = './icon-sets/json'; // Dossier contenant tous les .json
|
||||||
|
const MASTER_OUTPUT_DIR = './all_iconify_icons';
|
||||||
|
|
||||||
|
if (!fs.existsSync(MASTER_OUTPUT_DIR)) {
|
||||||
|
fs.mkdirSync(MASTER_OUTPUT_DIR, { recursive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Lister tous les fichiers JSON du dossier
|
||||||
|
const files = fs.readdirSync(SOURCE_DIR).filter(f => f.endsWith('.json'));
|
||||||
|
|
||||||
|
files.forEach(file => {
|
||||||
|
const setName = path.basename(file, '.json');
|
||||||
|
const setOutputDir = path.join(MASTER_OUTPUT_DIR, setName);
|
||||||
|
|
||||||
|
console.log(`📦 Traitement du set : ${setName}...`);
|
||||||
|
|
||||||
|
if (!fs.existsSync(setOutputDir)) {
|
||||||
|
fs.mkdirSync(setOutputDir, { recursive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const iconSet = JSON.parse(fs.readFileSync(path.join(SOURCE_DIR, file), 'utf8'));
|
||||||
|
const iconNames = Object.keys(iconSet.icons);
|
||||||
|
|
||||||
|
iconNames.forEach(name => {
|
||||||
|
const iconData = getIconData(iconSet, name);
|
||||||
|
if (!iconData) return;
|
||||||
|
|
||||||
|
const renderData = iconToSVG(iconData);
|
||||||
|
const attributes = {
|
||||||
|
'xmlns': 'http://www.w3.org/2000/svg',
|
||||||
|
...renderData.attributes
|
||||||
|
};
|
||||||
|
|
||||||
|
const attrString = Object.entries(attributes)
|
||||||
|
.map(([k, v]) => `${k}="${v}"`)
|
||||||
|
.join(' ');
|
||||||
|
|
||||||
|
const svgContent = `<svg ${attrString}>${renderData.body}</svg>`;
|
||||||
|
|
||||||
|
// On remplace les caractères problématiques dans les noms de fichiers
|
||||||
|
const safeName = name.replace(/:/g, '-');
|
||||||
|
fs.writeFileSync(path.join(setOutputDir, `${safeName}.svg`), svgContent);
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`❌ Erreur sur le set ${setName}:`, err.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(`\n✅ Opération terminée !`);
|
||||||
|
console.log(`📂 Toutes les icônes sont dans : ${path.resolve(MASTER_OUTPUT_DIR)}`);
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user