diff --git a/.build/build-icons.mjs b/.build/build-icons.mjs index 6fc54f9c7e..34d4960720 100644 --- a/.build/build-icons.mjs +++ b/.build/build-icons.mjs @@ -1,7 +1,7 @@ -import fs from 'fs-extra' -import path from 'path' -import { PACKAGES_DIR, getAliases, toPascalCase, getAllIcons } from './helpers.mjs' -import { stringify } from 'svgson' +import fs from 'fs-extra'; +import path from 'path'; +import { PACKAGES_DIR, getAliases, toPascalCase, getAllIcons } from './helpers.mjs'; +import { stringify } from 'svgson'; /** * Build icons @@ -22,40 +22,39 @@ export const buildJsIcons = ({ key = true, pascalCase = false, pascalName = true, - indexFile = 'icons.ts' + indexFile = 'icons.ts', }) => { const DIST_DIR = path.resolve(PACKAGES_DIR, name); const aliases = getAliases(), - allIcons = getAllIcons(false, true) + allIcons = getAllIcons(false, true); - let index = [] + let index = []; Object.entries(allIcons).forEach(([type, icons]) => { icons.forEach((icon, i) => { - process.stdout.write(`Building \`${name}\` ${type} ${i}/${icons.length}: ${icon.name.padEnd(42)}\r`) + process.stdout.write( + `Building \`${name}\` ${type} ${i}/${icons.length}: ${icon.name.padEnd(42)}\r`, + ); const children = icon.obj.children - .map(({ - name, - attributes - }, i) => { + .map(({ name, attributes }, i) => { if (key) { - attributes.key = `svg-${i}` + attributes.key = `svg-${i}`; } if (pascalCase) { - attributes.strokeWidth = attributes['stroke-width'] - delete attributes['stroke-width'] + attributes.strokeWidth = attributes['stroke-width']; + delete attributes['stroke-width']; } - return [name, attributes] + return [name, attributes]; }) .filter((i) => { - const [name, attributes] = i - return !attributes.d || attributes.d !== 'M0 0h24v24H0z' - }) + const [name, attributes] = i; + return !attributes.d || attributes.d !== 'M0 0h24v24H0z'; + }); const iconName = `${icon.name}${type !== 'outline' ? `-${type}` : ''}`, - iconNamePascal = `${icon.namePascal}${type !== 'outline' ? toPascalCase(type) : ''}` + iconNamePascal = `${icon.namePascal}${type !== 'outline' ? toPascalCase(type) : ''}`; let component = componentTemplate({ type, @@ -63,21 +62,27 @@ export const buildJsIcons = ({ namePascal: iconNamePascal, children, stringify, - svg: icon.content - }) - - let filePath = path.resolve(DIST_DIR, 'src/icons', `${pascalName ? iconNamePascal : iconName}.${extension}`) - fs.writeFileSync(filePath, component, 'utf-8') - - index.push(indexItemTemplate({ - type, - name: iconName, - namePascal: iconNamePascal - })) - }) - }) - - fs.writeFileSync(path.resolve(DIST_DIR, `src/icons/${indexFile}`), index.join('\n'), 'utf-8') + svg: icon.content, + }); + + let filePath = path.resolve( + DIST_DIR, + 'src/icons', + `${pascalName ? iconNamePascal : iconName}.${extension}`, + ); + fs.writeFileSync(filePath, component, 'utf-8'); + + index.push( + indexItemTemplate({ + type, + name: iconName, + namePascal: iconNamePascal, + }), + ); + }); + }); + + fs.writeFileSync(path.resolve(DIST_DIR, `src/icons/${indexFile}`), index.join('\n'), 'utf-8'); // Write aliases let aliasesStr = ''; @@ -87,28 +92,61 @@ export const buildJsIcons = ({ from, to, fromPascal: toPascalCase(from), - toPascal: toPascalCase(to) - }) - }) + toPascal: toPascalCase(to), + }); + }); } - fs.writeFileSync(path.resolve(DIST_DIR, `./src/aliases.ts`), aliasesStr || `export {};`, 'utf-8') -} + fs.writeFileSync(path.resolve(DIST_DIR, `./src/aliases.ts`), aliasesStr || `export {};`, 'utf-8'); +}; export const buildIconsList = (name) => { const DIST_DIR = path.resolve(PACKAGES_DIR, name); - const allIcons = getAllIcons(false, true) + const allIcons = getAllIcons(false, true); + + let index = []; + Object.entries(allIcons).forEach(([type, icons]) => { + icons.forEach((icon, i) => { + process.stdout.write( + `Building \`${name}\` ${type} ${i}/${icons.length}: ${icon.name.padEnd(42)}\r`, + ); + + const iconName = `${icon.name}${type !== 'outline' ? `-${type}` : ''}`; + + index.push(iconName); + }); + }); + + fs.writeFileSync( + path.resolve(DIST_DIR, `./src/icons-list.ts`), + `export default ${JSON.stringify(index, null, 2)};`, + 'utf-8', + ); +}; + +export const buildIconsDynamicImport = (name) => { + const DIST_DIR = path.resolve(PACKAGES_DIR, name); + const allIcons = getAllIcons(false, true); - let index = [] + let dynamicImportString = 'export default {'; Object.entries(allIcons).forEach(([type, icons]) => { icons.forEach((icon, i) => { - process.stdout.write(`Building \`${name}\` ${type} ${i}/${icons.length}: ${icon.name.padEnd(42)}\r`) + process.stdout.write( + `Building \`${name}\` ${type} ${i}/${icons.length}: ${icon.name.padEnd(42)}\r`, + ); + + const iconName = `${icon.name}${type !== 'outline' ? `-${type}` : ''}`, + iconNamePascal = `${icon.namePascal}${type !== 'outline' ? toPascalCase(type) : ''}`; - const iconName = `${icon.name}${type !== 'outline' ? `-${type}` : ''}` + dynamicImportString += ` '${iconName}': () => import('./icons/${iconNamePascal}'),\n`; + }); + }); - index.push(iconName) - }) - }) + dynamicImportString += '};\n'; - fs.writeFileSync(path.resolve(DIST_DIR, `./src/icons-list.ts`), `export default ${JSON.stringify(index, null, 2)};`, 'utf-8') -} + fs.writeFileSync( + path.resolve(DIST_DIR, `./src/dynamic-imports.ts`), + dynamicImportString, + 'utf-8', + ); +}; diff --git a/.build/helpers.mjs b/.build/helpers.mjs index 9dede2b14f..20a44a730f 100644 --- a/.build/helpers.mjs +++ b/.build/helpers.mjs @@ -1,19 +1,22 @@ -import fs from 'fs' -import path, { resolve, basename } from 'path' -import { fileURLToPath } from 'url' -import svgParse from 'parse-svg-path' -import svgpath from 'svgpath' +import fs from 'fs'; +import path, { resolve, basename } from 'path'; +import { fileURLToPath } from 'url'; +import svgParse from 'parse-svg-path'; +import svgpath from 'svgpath'; import cheerio from 'cheerio'; import { minify } from 'html-minifier'; -import { parseSync } from 'svgson' -import { optimize } from 'svgo' -import cp from 'child_process' -import minimist from 'minimist' -import matter from 'gray-matter' -import { globSync } from 'glob' -import { exec } from 'child_process' - -export const iconTemplate = (type) => type === 'outline' ? ` + type === 'outline' + ? ` type === 'outline' ? `` : `` + : `` +>`; -export const blankSquare = '' +export const blankSquare = ''; -export const types = ['outline', 'filled'] +export const types = ['outline', 'filled']; export const getCurrentDirPath = () => { return path.dirname(fileURLToPath(import.meta.url)); -} +}; -export const HOME_DIR = resolve(getCurrentDirPath(), '..') +export const HOME_DIR = resolve(getCurrentDirPath(), '..'); -export const ICONS_SRC_DIR = resolve(HOME_DIR, 'icons') -export const PACKAGES_DIR = resolve(HOME_DIR, 'packages') -export const GITHUB_DIR = resolve(HOME_DIR, '.github') +export const ICONS_SRC_DIR = resolve(HOME_DIR, 'icons'); +export const PACKAGES_DIR = resolve(HOME_DIR, 'packages'); +export const GITHUB_DIR = resolve(HOME_DIR, '.github'); export const parseMatter = (icon) => { - const { data, content } = matter.read(icon, { delims: [''] }) + const { data, content } = matter.read(icon, { delims: [''] }); - return { data, content } -} + return { data, content }; +}; const getSvgContent = (svg, type, name) => { return svg .replace(/]+)>/, (m, m1) => { - return `\n ${blankSquare}` + return `\n ${blankSquare}`; }) - .trim() -} + .trim(); +}; export const getAllIcons = (withContent = false, withObject = false) => { - let icons = {} + let icons = {}; const limit = process.env['ICONS_LIMIT'] || Infinity; - types.forEach(type => { - icons[type] = globSync(path.join(ICONS_SRC_DIR, `${type}/*.svg`)) + types.forEach((type) => { + icons[type] = globSync(slash(path.join(ICONS_SRC_DIR, `${type}/*.svg`))) .slice(0, limit) .sort() - .map(i => { + .map((i) => { const { data, content } = parseMatter(i), - name = basename(i, '.svg') + name = basename(i, '.svg'); return { name, @@ -80,20 +84,20 @@ export const getAllIcons = (withContent = false, withObject = false) => { version: data.version || '', unicode: data.unicode || '', ...(withContent ? { content: getSvgContent(content, type, name) } : {}), - ...(withObject ? { obj: parseSync(content.replace(blankSquare, '')) } : {}) - } + ...(withObject ? { obj: parseSync(content.replace(blankSquare, '')) } : {}), + }; }) - .sort() - }) + .sort(); + }); - return icons -} + return icons; +}; export const getAllIconsMerged = (withContent = false, withObject = false) => { - const allIcons = getAllIcons(true) + const allIcons = getAllIcons(true); const icons = {}; - allIcons.outline.forEach(icon => { + allIcons.outline.forEach((icon) => { icons[icon.name] = { name: icon.name, category: icon.category || '', @@ -103,42 +107,41 @@ export const getAllIconsMerged = (withContent = false, withObject = false) => { version: icon.version || '', unicode: icon.unicode || '', ...(withContent ? { content: icon.content } : {}), - ...(withObject ? { obj: icon.obj } : {}) - } - } - } - }) + ...(withObject ? { obj: icon.obj } : {}), + }, + }, + }; + }); - allIcons.filled.forEach(icon => { + allIcons.filled.forEach((icon) => { if (icons[icon.name]) { icons[icon.name].styles.filled = { version: icon.version || '', unicode: icon.unicode || '', ...(withContent ? { content: icon.content } : {}), - ...(withObject ? { obj: icon.obj } : {}) - } + ...(withObject ? { obj: icon.obj } : {}), + }; } - }) + }); return icons; -} +}; export const getArgvs = () => { - return minimist(process.argv.slice(2)) -} + return minimist(process.argv.slice(2)); +}; export const getPackageDir = (packageName) => { - return `${PACKAGES_DIR}/${packageName}` -} - + return `${PACKAGES_DIR}/${packageName}`; +}; /** * Return project package.json * @returns {any} */ export const getPackageJson = () => { - return JSON.parse(fs.readFileSync(resolve(HOME_DIR, 'package.json'), 'utf-8')) -} + return JSON.parse(fs.readFileSync(resolve(HOME_DIR, 'package.json'), 'utf-8')); +}; /** * Reads SVGs from directory @@ -147,17 +150,17 @@ export const getPackageJson = () => { * @returns {string[]} */ export const readSvgDirectory = (directory) => { - return fs.readdirSync(directory).filter((file) => path.extname(file) === '.svg') -} + return fs.readdirSync(directory).filter((file) => path.extname(file) === '.svg'); +}; export const getAliases = (groupped = false) => { const allAliases = JSON.parse(fs.readFileSync(resolve(HOME_DIR, 'aliases.json'), 'utf-8')); - const allIcons = getAllIcons() + const allIcons = getAllIcons(); if (groupped) { let aliases = []; - types.forEach(type => { - const icons = allIcons[type].map(i => i.name); + types.forEach((type) => { + const icons = allIcons[type].map((i) => i.name); aliases[type] = {}; @@ -168,22 +171,23 @@ export const getAliases = (groupped = false) => { } }); - return aliases + return aliases; } else { let aliases = []; - types.forEach(type => { - const icons = allIcons[type].map(i => i.name); + types.forEach((type) => { + const icons = allIcons[type].map((i) => i.name); for (const [key, value] of Object.entries(allAliases[type])) { if (icons.includes(value)) { - aliases[`${key}${type !== 'outline' ? `-${type}` : ''}`] = `${value}${type !== 'outline' ? `-${type}` : ''}`; + aliases[`${key}${type !== 'outline' ? `-${type}` : ''}`] = + `${value}${type !== 'outline' ? `-${type}` : ''}`; } } }); - return aliases + return aliases; } -} +}; /** * Read SVG @@ -193,8 +197,8 @@ export const getAliases = (groupped = false) => { * @returns {string} */ export const readSvg = (fileName, directory) => { - return fs.readFileSync(path.join(directory, fileName), 'utf-8') -} + return fs.readFileSync(path.join(directory, fileName), 'utf-8'); +}; /** * Create directory if not exists @@ -212,8 +216,8 @@ export const createDirectory = (dir) => { * @returns {string} */ export const getSvgName = (fileName) => { - return path.basename(fileName, '.svg') -} + return path.basename(fileName, '.svg'); +}; /** * Convert string to CamelCase @@ -221,48 +225,53 @@ export const getSvgName = (fileName) => { * @returns {*} */ export const toCamelCase = (string) => { - return string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()) -} + return string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) => + p2 ? p2.toUpperCase() : p1.toLowerCase(), + ); +}; export const toPascalCase = (string) => { const camelCase = toCamelCase(string); return camelCase.charAt(0).toUpperCase() + camelCase.slice(1); -} +}; export const addFloats = function (n1, n2) { - return Math.round((parseFloat(n1) + parseFloat(n2)) * 1000) / 1000 -} + return Math.round((parseFloat(n1) + parseFloat(n2)) * 1000) / 1000; +}; export const optimizePath = function (path) { - let transformed = svgpath(path).rel().round(3).toString() + let transformed = svgpath(path).rel().round(3).toString(); - return svgParse(transformed).map(function (a) { - return a.join(' ') - }).join('') -} + return svgParse(transformed) + .map(function (a) { + return a.join(' '); + }) + .join(''); +}; export const optimizeSVG = (data) => { return optimize(data, { js2svg: { indent: 2, - pretty: true + pretty: true, }, plugins: [ { name: 'preset-default', params: { overrides: { - mergePaths: false - } - } - }] - }).data -} + mergePaths: false, + }, + }, + }, + ], + }).data; +}; export function buildIconsObject(svgFiles, getSvg) { return svgFiles - .map(svgFile => { + .map((svgFile) => { const name = path.basename(svgFile, '.svg'); const svg = getSvg(svgFile); const contents = getSvgContents(svg); @@ -281,251 +290,255 @@ function getSvgContents(svg) { export const asyncForEach = async (array, callback) => { for (let index = 0; index < array.length; index++) { - await callback(array[index], index, array) + await callback(array[index], index, array); } -} +}; export const createScreenshot = (filePath, retina = true) => { - cp.execSync(`rsvg-convert -x 2 -y 2 ${filePath} > ${filePath.replace('.svg', '.png')}`) + cp.execSync(`rsvg-convert -x 2 -y 2 ${filePath} > ${filePath.replace('.svg', '.png')}`); if (retina) { - cp.execSync(`rsvg-convert -x 4 -y 4 ${filePath} > ${filePath.replace('.svg', '@2x.png')}`) + cp.execSync(`rsvg-convert -x 4 -y 4 ${filePath} > ${filePath.replace('.svg', '@2x.png')}`); } -} +}; export const createSvgSymbol = (svg, name, stroke) => { - return svg.replace('', '') .replace(/\n\s+/g, ' ') .replace(//gis, '') - .trim() -} - -export const generateIconsPreview = async function (files, destFile, { - columnsCount = 19, - paddingOuter = 7, - color = '#354052', - background = '#fff', - png = true, - stroke = 2, - retina = true -} = {}) { + .trim(); +}; +export const generateIconsPreview = async function ( + files, + destFile, + { + columnsCount = 19, + paddingOuter = 7, + color = '#354052', + background = '#fff', + png = true, + stroke = 2, + retina = true, + } = {}, +) { const padding = 20, - iconSize = 24 + iconSize = 24; const iconsCount = files.length, rowsCount = Math.ceil(iconsCount / columnsCount), width = columnsCount * (iconSize + padding) + 2 * paddingOuter - padding, - height = rowsCount * (iconSize + padding) + 2 * paddingOuter - padding + height = rowsCount * (iconSize + padding) + 2 * paddingOuter - padding; let svgContentSymbols = '', svgContentIcons = '', x = paddingOuter, - y = paddingOuter + y = paddingOuter; files.forEach(function (file, i) { const name = file.replace(/^(.*)\/([^\/]+)\/([^.]+).svg$/g, '$2-$3'); let svgFile = fs.readFileSync(file), - svgFileContent = svgFile.toString() + svgFileContent = svgFile.toString(); - svgFileContent = createSvgSymbol(svgFileContent, name, stroke) + svgFileContent = createSvgSymbol(svgFileContent, name, stroke); - svgContentSymbols += `\t${svgFileContent}\n` - svgContentIcons += `\t\n` + svgContentSymbols += `\t${svgFileContent}\n`; + svgContentIcons += `\t\n`; - x += padding + iconSize + x += padding + iconSize; if (i % columnsCount === columnsCount - 1) { - x = paddingOuter - y += padding + iconSize + x = paddingOuter; + y += padding + iconSize; } - }) + }); - const svgContent = `\n${svgContentSymbols}\n${svgContentIcons}\n` + const svgContent = `\n${svgContentSymbols}\n${svgContentIcons}\n`; - console.log(destFile) + console.log(destFile); - fs.writeFileSync(destFile, svgContent) + fs.writeFileSync(destFile, svgContent); if (png) { - await createScreenshot(destFile, retina) + await createScreenshot(destFile, retina); } -} - +}; export const printChangelog = function (newIcons, modifiedIcons, renamedIcons, pretty = false) { if (newIcons.length > 0) { if (pretty) { - console.log(`### ${newIcons.length} new icon${newIcons.length > 1 ? 's' : ''}:\n`) + console.log(`### ${newIcons.length} new icon${newIcons.length > 1 ? 's' : ''}:\n`); newIcons.forEach(function (icon, i) { - console.log(`- \`${icon}\``) - }) + console.log(`- \`${icon}\``); + }); } else { - let str = '' - str += `${newIcons.length} new icon${newIcons.length > 1 ? 's' : ''}: ` + let str = ''; + str += `${newIcons.length} new icon${newIcons.length > 1 ? 's' : ''}: `; newIcons.forEach(function (icon, i) { - str += `\`${icon}\`` + str += `\`${icon}\``; - if ((i + 1) <= newIcons.length - 1) { - str += ', ' + if (i + 1 <= newIcons.length - 1) { + str += ', '; } - }) + }); - console.log(str) + console.log(str); } - console.log('') + console.log(''); } if (modifiedIcons.length > 0) { - let str = '' - str += `Fixed icon${modifiedIcons.length > 1 ? 's' : ''}: ` + let str = ''; + str += `Fixed icon${modifiedIcons.length > 1 ? 's' : ''}: `; modifiedIcons.forEach(function (icon, i) { - str += `\`${icon}\`` + str += `\`${icon}\``; - if ((i + 1) <= modifiedIcons.length - 1) { - str += ', ' + if (i + 1 <= modifiedIcons.length - 1) { + str += ', '; } - }) + }); - console.log(str) - console.log('') + console.log(str); + console.log(''); } if (renamedIcons.length > 0) { - console.log(`Renamed icons: `) + console.log(`Renamed icons: `); renamedIcons.forEach(function (icon, i) { - console.log(`- \`${icon[0]}\` renamed to \`${icon[1]}\``) - }) + console.log(`- \`${icon[0]}\` renamed to \`${icon[1]}\``); + }); } -} - +}; export const getCompileOptions = () => { const compileOptions = { includeIcons: [], strokeWidth: null, - fontForge: 'fontforge' - } + fontForge: 'fontforge', + }; if (fs.existsSync('../compile-options.json')) { try { - const tempOptions = JSON.parse(fs.readFileSync('../compile-options.json').toString()) + const tempOptions = JSON.parse(fs.readFileSync('../compile-options.json').toString()); if (typeof tempOptions !== 'object') { - throw 'Compile options file does not contain an json object' + throw 'Compile options file does not contain an json object'; } if (typeof tempOptions.includeIcons !== 'undefined') { if (!Array.isArray(tempOptions.includeIcons)) { - throw 'property inludeIcons is not an array' + throw 'property inludeIcons is not an array'; } - compileOptions.includeIcons = tempOptions.includeIcons + compileOptions.includeIcons = tempOptions.includeIcons; } if (typeof tempOptions.includeCategories !== 'undefined') { if (typeof tempOptions.includeCategories === 'string') { - tempOptions.includeCategories = tempOptions.includeCategories.split(' ') + tempOptions.includeCategories = tempOptions.includeCategories.split(' '); } if (!Array.isArray(tempOptions.includeCategories)) { - throw 'property includeCategories is not an array or string' + throw 'property includeCategories is not an array or string'; } - const tags = Object.entries(require('./tags.json')) + const tags = Object.entries(require('./tags.json')); tempOptions.includeCategories.forEach(function (category) { - category = category.charAt(0).toUpperCase() + category.slice(1) + category = category.charAt(0).toUpperCase() + category.slice(1); for (const [icon, data] of tags) { if (data.category === category && compileOptions.includeIcons.indexOf(icon) === -1) { - compileOptions.includeIcons.push(icon) + compileOptions.includeIcons.push(icon); } } - }) + }); } if (typeof tempOptions.excludeIcons !== 'undefined') { if (!Array.isArray(tempOptions.excludeIcons)) { - throw 'property excludeIcons is not an array' + throw 'property excludeIcons is not an array'; } compileOptions.includeIcons = compileOptions.includeIcons.filter(function (icon) { - return tempOptions.excludeIcons.indexOf(icon) === -1 - }) + return tempOptions.excludeIcons.indexOf(icon) === -1; + }); } if (typeof tempOptions.excludeOffIcons !== 'undefined' && tempOptions.excludeOffIcons) { // Exclude `*-off` icons compileOptions.includeIcons = compileOptions.includeIcons.filter(function (icon) { - return !icon.endsWith('-off') - }) + return !icon.endsWith('-off'); + }); } if (typeof tempOptions.strokeWidth !== 'undefined') { - if (typeof tempOptions.strokeWidth !== 'string' && typeof tempOptions.strokeWidth !== 'number') { - throw 'property strokeWidth is not a string or number' + if ( + typeof tempOptions.strokeWidth !== 'string' && + typeof tempOptions.strokeWidth !== 'number' + ) { + throw 'property strokeWidth is not a string or number'; } - compileOptions.strokeWidth = tempOptions.strokeWidth.toString() + compileOptions.strokeWidth = tempOptions.strokeWidth.toString(); } if (typeof tempOptions.fontForge !== 'undefined') { if (typeof tempOptions.fontForge !== 'string') { - throw 'property fontForge is not a string' + throw 'property fontForge is not a string'; } - compileOptions.fontForge = tempOptions.fontForge + compileOptions.fontForge = tempOptions.fontForge; } - } catch (error) { - throw `Error reading compile-options.json: ${error}` + throw `Error reading compile-options.json: ${error}`; } } - return compileOptions -} - + return compileOptions; +}; export const convertIconsToImages = async (dir, extension, size = 240) => { - const icons = getAllIcons() + const icons = getAllIcons(); await asyncForEach(Object.entries(icons), async function ([type, svgFiles]) { - fs.mkdirSync(path.join(dir, `./${type}`), { recursive: true }) + fs.mkdirSync(path.join(dir, `./${type}`), { recursive: true }); await asyncForEach(svgFiles, async function (file, i) { - const distPath = path.join(dir, `./${type}/${file.name}.${extension}`) + const distPath = path.join(dir, `./${type}/${file.name}.${extension}`); - process.stdout.write(`Building \`icons/${extension}\` ${type} ${i}/${svgFiles.length}: ${file.name.padEnd(42)}\r`) + process.stdout.write( + `Building \`icons/${extension}\` ${type} ${i}/${svgFiles.length}: ${file.name.padEnd(42)}\r`, + ); await new Promise((resolve, reject) => { exec(`rsvg-convert -f ${extension} -h ${size} ${file.path} > ${distPath}`, (error) => { - error ? reject() : resolve() - }) - }) - }) - }) -} - + error ? reject() : resolve(); + }); + }); + }); + }); +}; export const getMaxUnicode = () => { - const files = globSync(path.join(ICONS_SRC_DIR, '**/*.svg')) - let maxUnicode = 0 + const files = globSync(path.join(ICONS_SRC_DIR, '**/*.svg')); + let maxUnicode = 0; files.forEach(function (file) { - const svgFile = fs.readFileSync(file).toString() + const svgFile = fs.readFileSync(file).toString(); svgFile.replace(/unicode: "([a-f0-9.]+)"/i, function (m, unicode) { - const newUnicode = parseInt(unicode, 16) + const newUnicode = parseInt(unicode, 16); if (newUnicode) { - maxUnicode = Math.max(maxUnicode, newUnicode) + maxUnicode = Math.max(maxUnicode, newUnicode); } - }) - }) + }); + }); - console.log(`Max unicode: ${maxUnicode}`) + console.log(`Max unicode: ${maxUnicode}`); - return maxUnicode -} + return maxUnicode; +}; diff --git a/package.json b/package.json index 89e94b6412..f5c176df7d 100644 --- a/package.json +++ b/package.json @@ -76,14 +76,15 @@ "rollup-plugin-license": "^3.2.0", "rollup-plugin-peer-deps-external": "2.2.4", "rollup-plugin-visualizer": "^5.12.0", + "slash": "^5.1.0", "svg-outline-stroke": "1.3.1", "svgo": "^3.2.0", "svgpath": "^2.6.0", "svgson": "^5.3.1", "turbo": "^1.12.4", "typescript": "^5.3.3", - "vitest": "^1.3.1", - "vite": "^5.1.4" + "vite": "^5.1.4", + "vitest": "^1.3.1" }, "release-it": { "plugins": { diff --git a/packages/icons-react/.gitignore b/packages/icons-react/.gitignore index 76ea8e161d..ccd7ec860b 100644 --- a/packages/icons-react/.gitignore +++ b/packages/icons-react/.gitignore @@ -1,2 +1,3 @@ src/aliases.ts src/icons-list.ts +src/dynamic-imports.ts diff --git a/packages/icons-react/build.mjs b/packages/icons-react/build.mjs index ca309648be..324a916f91 100644 --- a/packages/icons-react/build.mjs +++ b/packages/icons-react/build.mjs @@ -1,22 +1,20 @@ #!/usr/bin/env node -import { buildJsIcons, buildIconsList } from '../../.build/build-icons.mjs' +import { + buildJsIcons, + buildIconsList, + buildIconsDynamicImport, +} from '../../.build/build-icons.mjs'; -const componentTemplate = ({ - type, - name, - namePascal, - children -}) => `\ +const componentTemplate = ({ type, name, namePascal, children }) => `\ import createReactComponent from '../createReactComponent'; export default createReactComponent('${type}', '${name}', '${namePascal}', ${JSON.stringify(children)});`; -const indexItemTemplate = ({ - name, - namePascal -}) => `export { default as ${namePascal} } from './${namePascal}';` +const indexItemTemplate = ({ name, namePascal }) => + `export { default as ${namePascal} } from './${namePascal}';`; -const aliasTemplate = ({ fromPascal, toPascal }) => `export { default as Icon${fromPascal} } from './icons/Icon${toPascal}';\n` +const aliasTemplate = ({ fromPascal, toPascal }) => + `export { default as Icon${fromPascal} } from './icons/Icon${toPascal}';\n`; buildJsIcons({ name: 'icons-react', @@ -25,7 +23,9 @@ buildJsIcons({ aliasTemplate, indexFile: 'index.ts', pascalCase: true, - extension: 'ts' -}) + extension: 'ts', +}); -buildIconsList('icons-react') +buildIconsList('icons-react'); + +buildIconsDynamicImport('icons-react'); diff --git a/packages/icons-react/src/tabler-icons-react.ts b/packages/icons-react/src/tabler-icons-react.ts index 6821ed129e..0ffc0e5e42 100644 --- a/packages/icons-react/src/tabler-icons-react.ts +++ b/packages/icons-react/src/tabler-icons-react.ts @@ -1,6 +1,7 @@ export * from './icons/index'; export * as icons from './icons/index'; export * as iconsList from './icons-list'; +export * as dynamicImports from './dynamic-imports'; export * from './aliases'; export { default as createReactComponent } from './createReactComponent'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8f01610ca2..d0d89aab9f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -93,6 +93,9 @@ importers: rollup-plugin-visualizer: specifier: ^5.12.0 version: 5.12.0(rollup@4.12.0) + slash: + specifier: ^5.1.0 + version: 5.1.0 svg-outline-stroke: specifier: 1.3.1 version: 1.3.1