Change CSS naming

build-fonts.js

@@ -3,21 +3,21 @@ const path = require('path');
 const { spawnSync } = require('child_process');
 
 const PREFIX_CONFIG = {
-    rs: { label: 'Regular Straight', file: 'regular-straight' },
-    rr: { label: 'Regular Rounded', file: 'regular-rounded' },
-    bs: { label: 'Bold Straight', file: 'bold-straight' },
-    br: { label: 'Bold Rounded', file: 'bold-rounded' },
-    ss: { label: 'Solid Straight', file: 'solid-straight' },
-    sr: { label: 'Solid Rounded', file: 'solid-rounded' },
-    ts: { label: 'Thin Straight', file: 'thin-straight' },
-    tr: { label: 'Thin Rounded', file: 'thin-rounded' },
-    rc: { label: 'Regular Chubby', file: 'regular-chubby' },
-    sc: { label: 'Solid Chubby', file: 'solid-chubby' },
-    tc: { label: 'Thin Chubby', file: 'thin-chubby' },
-    ds: { label: 'Duotone Straight', file: 'duotone-straight' },
-    dr: { label: 'Duotone Rounded', file: 'duotone-rounded' },
-    dc: { label: 'Duotone Chubby', file: 'duotone-chubby' },
-    brands: { label: 'Brands', file: 'brands' }
+    rs: { label: 'Regular Straight', file: 'regular-straight', stroke: 'regular' },
+    rr: { label: 'Regular Rounded', file: 'regular-rounded', stroke: 'regular' },
+    bs: { label: 'Bold Straight', file: 'bold-straight', stroke: 'bold' },
+    br: { label: 'Bold Rounded', file: 'bold-rounded', stroke: 'bold' },
+    ss: { label: 'Solid Straight', file: 'solid-straight', stroke: 'solid' },
+    sr: { label: 'Solid Rounded', file: 'solid-rounded', stroke: 'solid' },
+    ts: { label: 'Thin Straight', file: 'thin-straight', stroke: 'thin' },
+    tr: { label: 'Thin Rounded', file: 'thin-rounded', stroke: 'thin' },
+    rc: { label: 'Regular Chubby', file: 'regular-chubby', stroke: 'regular' },
+    sc: { label: 'Solid Chubby', file: 'solid-chubby', stroke: 'solid' },
+    tc: { label: 'Thin Chubby', file: 'thin-chubby', stroke: 'thin' },
+    ds: { label: 'Duotone Straight', file: 'duotone-straight', stroke: 'duotone' },
+    dr: { label: 'Duotone Rounded', file: 'duotone-rounded', stroke: 'duotone' },
+    dc: { label: 'Duotone Chubby', file: 'duotone-chubby', stroke: 'duotone' },
+    brands: { label: 'Brands', file: 'brands', stroke: 'brands' }
 };
 
 function runFontForge({ prefix, outputDir, clean }) {
@@ -41,11 +41,17 @@ function runFontForge({ prefix, outputDir, clean }) {
 }
 
 function buildCss({ order, mapping, outputPath }) {
-    // Base styles for the main CSS file
+    // Ensure css directory exists
+    const cssDir = path.join(path.dirname(outputPath), 'css');
+    if (!fs.existsSync(cssDir)) {
+        fs.mkdirSync(cssDir, { recursive: true });
+    }
+
+    // Generate base.css with shared styles
     const baseLines = [];
     baseLines.push('/*!');
-    baseLines.push(' * Flaticon Icon Fonts - Local Build');
-    baseLines.push(' * Generated from Flaticon icon API');
+    baseLines.push(' * Flaticon Icon Fonts - Base Styles');
+    baseLines.push(' * Required for all icon fonts to render correctly');
     baseLines.push(' */');
     baseLines.push('');
     baseLines.push('[class^="fi-"], [class*=" fi-"] {');
@@ -59,27 +65,33 @@ function buildCss({ order, mapping, outputPath }) {
     baseLines.push('    -moz-osx-font-smoothing: grayscale;');
     baseLines.push('}');
     baseLines.push('');
+    baseLines.push('.fi { display: inline-block; font-style: normal; }');
+    baseLines.push('');
+    fs.writeFileSync(path.join(cssDir, 'base.css'), baseLines.join('\n'));
 
-    // Ensure css directory exists
-    const cssDir = path.join(path.dirname(outputPath), 'css');
-    if (!fs.existsSync(cssDir)) {
-        fs.mkdirSync(cssDir, { recursive: true });
-    }
+    // Track files by stroke type for grouped CSS
+    const strokeGroups = {};
 
     // Generate individual CSS file for each prefix
     order.forEach(prefix => {
-        const config = PREFIX_CONFIG[prefix] || { label: prefix, file: prefix };
+        const config = PREFIX_CONFIG[prefix] || { label: prefix, file: prefix, stroke: 'other' };
         const label = config.label;
         const fileSuffix = config.file;
+        const stroke = config.stroke;
         const names = mapping[prefix] || [];
-        const cssFileName = `flaticon-${fileSuffix}.css`;
+        const cssFileName = `${fileSuffix}.css`;
         const cssFilePath = path.join(cssDir, cssFileName);
 
+        // Track for stroke grouping
+        if (!strokeGroups[stroke]) strokeGroups[stroke] = [];
+        strokeGroups[stroke].push(cssFileName);
+
         const lines = [];
         lines.push('/*!');
         lines.push(` * ${label} (${prefix})`);
         lines.push(' * Generated from Flaticon icon API');
         lines.push(' */');
+        lines.push('@import url("./base.css");');
         lines.push('@font-face {');
         lines.push(`    font-family: "flaticon-${fileSuffix}";`);
         lines.push(`    src: url("../webfonts/flaticon-${fileSuffix}.woff2") format("woff2"),`);
@@ -106,16 +118,40 @@ function buildCss({ order, mapping, outputPath }) {
         lines.push('');
 
         fs.writeFileSync(cssFilePath, lines.join('\n'));
-
-        // Add import to main CSS
-        baseLines.push(`@import url("./css/${cssFileName}");`);
     });
 
-    baseLines.push('');
-    baseLines.push('.fi { display: inline-block; font-style: normal; }');
-    baseLines.push('');
+    // Generate stroke-grouped CSS files (regular.css, bold.css, etc.)
+    Object.entries(strokeGroups).forEach(([stroke, files]) => {
+        if (stroke === 'brands') return; // brands.css is already standalone
+        const groupLines = [];
+        groupLines.push('/*!');
+        groupLines.push(` * ${stroke.charAt(0).toUpperCase() + stroke.slice(1)} Icons (all corners)`);
+        groupLines.push(` * Includes: ${files.map(f => f.replace('.css', '')).join(', ')}`);
+        groupLines.push(' */');
+        groupLines.push('');
+        files.forEach(file => {
+            groupLines.push(`@import url("./${file}");`);
+        });
+        groupLines.push('');
+        fs.writeFileSync(path.join(cssDir, `${stroke}.css`), groupLines.join('\n'));
+    });
 
-    fs.writeFileSync(outputPath, baseLines.join('\n'));
+    // Generate all.css (main entry point)
+    const allLines = [];
+    allLines.push('/*!');
+    allLines.push(' * Flaticon Icon Fonts - All Icons');
+    allLines.push(' * Generated from Flaticon icon API');
+    allLines.push(' */');
+    allLines.push('');
+    allLines.push('@import url("./css/base.css");');
+    allLines.push('');
+    order.forEach(prefix => {
+        const config = PREFIX_CONFIG[prefix] || { file: prefix };
+        allLines.push(`@import url("./css/${config.file}.css");`);
+    });
+    allLines.push('');
+
+    fs.writeFileSync(outputPath, allLines.join('\n'));
 }
 
 function loadIcons() {
@@ -156,7 +192,7 @@ function main() {
     const prefixes = args.prefix ? String(args.prefix).split(',') : Object.keys(PREFIX_CONFIG);
     const clean = Boolean(args.clean);
     const outputDir = args.outputDir || 'fonts/webfonts';
-    const cssPath = args.css || 'fonts/flaticon.css';
+    const cssPath = args.css || 'fonts/all.css';
 
     const iconsByPrefix = loadIcons();
     const buildOrder = Object.keys(PREFIX_CONFIG).filter(prefix => prefixes.includes(prefix));

fonts/all.css

@@ -0,0 +1,22 @@
+/*!
+ * Flaticon Icon Fonts - All Icons
+ * Generated from Flaticon icon API
+ */
+
+@import url("./css/base.css");
+
+@import url("./css/regular-straight.css");
+@import url("./css/regular-rounded.css");
+@import url("./css/bold-straight.css");
+@import url("./css/bold-rounded.css");
+@import url("./css/solid-straight.css");
+@import url("./css/solid-rounded.css");
+@import url("./css/thin-straight.css");
+@import url("./css/thin-rounded.css");
+@import url("./css/regular-chubby.css");
+@import url("./css/solid-chubby.css");
+@import url("./css/thin-chubby.css");
+@import url("./css/duotone-straight.css");
+@import url("./css/duotone-rounded.css");
+@import url("./css/duotone-chubby.css");
+@import url("./css/brands.css");

fonts/css/base.css

@@ -0,0 +1,17 @@
+/*!
+ * Flaticon Icon Fonts - Base Styles
+ * Required for all icon fonts to render correctly
+ */
+
+[class^="fi-"], [class*=" fi-"] {
+    display: inline-block;
+    font-style: normal;
+    font-weight: normal !important;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.fi { display: inline-block; font-style: normal; }

fonts/css/bold-rounded.css

@@ -2,6 +2,7 @@
  * Bold Rounded (br)
  * Generated from Flaticon icon API
  */
+@import url("./base.css");
 @font-face {
     font-family: "flaticon-bold-rounded";
     src: url("../webfonts/flaticon-bold-rounded.woff2") format("woff2"),

fonts/css/bold-straight.css

@@ -2,6 +2,7 @@
  * Bold Straight (bs)
  * Generated from Flaticon icon API
  */
+@import url("./base.css");
 @font-face {
     font-family: "flaticon-bold-straight";
     src: url("../webfonts/flaticon-bold-straight.woff2") format("woff2"),

fonts/css/bold.css

@@ -0,0 +1,7 @@
+/*!
+ * Bold Icons (all corners)
+ * Includes: bold-straight, bold-rounded
+ */
+
+@import url("./bold-straight.css");
+@import url("./bold-rounded.css");

fonts/css/brands.css

@@ -2,6 +2,7 @@
  * Brands (brands)
  * Generated from Flaticon icon API
  */
+@import url("./base.css");
 @font-face {
     font-family: "flaticon-brands";
     src: url("../webfonts/flaticon-brands.woff2") format("woff2"),

fonts/css/duotone-chubby.css

@@ -2,6 +2,7 @@
  * Duotone Chubby (dc)
  * Generated from Flaticon icon API
  */
+@import url("./base.css");
 @font-face {
     font-family: "flaticon-duotone-chubby";
     src: url("../webfonts/flaticon-duotone-chubby.woff2") format("woff2"),

fonts/css/duotone-rounded.css

@@ -2,6 +2,7 @@
  * Duotone Rounded (dr)
  * Generated from Flaticon icon API
  */
+@import url("./base.css");
 @font-face {
     font-family: "flaticon-duotone-rounded";
     src: url("../webfonts/flaticon-duotone-rounded.woff2") format("woff2"),

fonts/css/duotone-straight.css

@@ -2,6 +2,7 @@
  * Duotone Straight (ds)
  * Generated from Flaticon icon API
  */
+@import url("./base.css");
 @font-face {
     font-family: "flaticon-duotone-straight";
     src: url("../webfonts/flaticon-duotone-straight.woff2") format("woff2"),

fonts/css/duotone.css

@@ -0,0 +1,8 @@
+/*!
+ * Duotone Icons (all corners)
+ * Includes: duotone-straight, duotone-rounded, duotone-chubby
+ */
+
+@import url("./duotone-straight.css");
+@import url("./duotone-rounded.css");
+@import url("./duotone-chubby.css");

fonts/css/regular-chubby.css

@@ -2,6 +2,7 @@
  * Regular Chubby (rc)
  * Generated from Flaticon icon API
  */
+@import url("./base.css");
 @font-face {
     font-family: "flaticon-regular-chubby";
     src: url("../webfonts/flaticon-regular-chubby.woff2") format("woff2"),

fonts/css/regular-rounded.css

@@ -2,6 +2,7 @@
  * Regular Rounded (rr)
  * Generated from Flaticon icon API
  */
+@import url("./base.css");
 @font-face {
     font-family: "flaticon-regular-rounded";
     src: url("../webfonts/flaticon-regular-rounded.woff2") format("woff2"),

fonts/css/regular-straight.css

@@ -2,6 +2,7 @@
  * Regular Straight (rs)
  * Generated from Flaticon icon API
  */
+@import url("./base.css");
 @font-face {
     font-family: "flaticon-regular-straight";
     src: url("../webfonts/flaticon-regular-straight.woff2") format("woff2"),

fonts/css/regular.css

@@ -0,0 +1,8 @@
+/*!
+ * Regular Icons (all corners)
+ * Includes: regular-straight, regular-rounded, regular-chubby
+ */
+
+@import url("./regular-straight.css");
+@import url("./regular-rounded.css");
+@import url("./regular-chubby.css");

fonts/css/solid-chubby.css

@@ -2,6 +2,7 @@
  * Solid Chubby (sc)
  * Generated from Flaticon icon API
  */
+@import url("./base.css");
 @font-face {
     font-family: "flaticon-solid-chubby";
     src: url("../webfonts/flaticon-solid-chubby.woff2") format("woff2"),

fonts/css/solid-rounded.css

@@ -2,6 +2,7 @@
  * Solid Rounded (sr)
  * Generated from Flaticon icon API
  */
+@import url("./base.css");
 @font-face {
     font-family: "flaticon-solid-rounded";
     src: url("../webfonts/flaticon-solid-rounded.woff2") format("woff2"),

fonts/css/solid-straight.css

@@ -2,6 +2,7 @@
  * Solid Straight (ss)
  * Generated from Flaticon icon API
  */
+@import url("./base.css");
 @font-face {
     font-family: "flaticon-solid-straight";
     src: url("../webfonts/flaticon-solid-straight.woff2") format("woff2"),

fonts/css/solid.css

@@ -0,0 +1,8 @@
+/*!
+ * Solid Icons (all corners)
+ * Includes: solid-straight, solid-rounded, solid-chubby
+ */
+
+@import url("./solid-straight.css");
+@import url("./solid-rounded.css");
+@import url("./solid-chubby.css");

fonts/css/thin-chubby.css

@@ -2,6 +2,7 @@
  * Thin Chubby (tc)
  * Generated from Flaticon icon API
  */
+@import url("./base.css");
 @font-face {
     font-family: "flaticon-thin-chubby";
     src: url("../webfonts/flaticon-thin-chubby.woff2") format("woff2"),

fonts/css/thin-rounded.css

@@ -2,6 +2,7 @@
  * Thin Rounded (tr)
  * Generated from Flaticon icon API
  */
+@import url("./base.css");
 @font-face {
     font-family: "flaticon-thin-rounded";
     src: url("../webfonts/flaticon-thin-rounded.woff2") format("woff2"),

fonts/css/thin-straight.css

@@ -2,6 +2,7 @@
  * Thin Straight (ts)
  * Generated from Flaticon icon API
  */
+@import url("./base.css");
 @font-face {
     font-family: "flaticon-thin-straight";
     src: url("../webfonts/flaticon-thin-straight.woff2") format("woff2"),

fonts/css/thin.css

@@ -0,0 +1,8 @@
+/*!
+ * Thin Icons (all corners)
+ * Includes: thin-straight, thin-rounded, thin-chubby
+ */
+
+@import url("./thin-straight.css");
+@import url("./thin-rounded.css");
+@import url("./thin-chubby.css");

fonts/flaticon.css

@@ -1,33 +0,0 @@
-/*!
- * Flaticon Icon Fonts - Local Build
- * Generated from Flaticon icon API
- */
-
-@import url("./css/flaticon-regular-straight.css");
-@import url("./css/flaticon-regular-rounded.css");
-@import url("./css/flaticon-bold-straight.css");
-@import url("./css/flaticon-bold-rounded.css");
-@import url("./css/flaticon-solid-straight.css");
-@import url("./css/flaticon-solid-rounded.css");
-@import url("./css/flaticon-thin-straight.css");
-@import url("./css/flaticon-thin-rounded.css");
-@import url("./css/flaticon-regular-chubby.css");
-@import url("./css/flaticon-solid-chubby.css");
-@import url("./css/flaticon-thin-chubby.css");
-@import url("./css/flaticon-duotone-straight.css");
-@import url("./css/flaticon-duotone-rounded.css");
-@import url("./css/flaticon-duotone-chubby.css");
-@import url("./css/flaticon-brands.css");
-
-[class^="fi-"], [class*=" fi-"] {
-    display: inline-block;
-    font-style: normal;
-    font-weight: normal !important;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.fi { display: inline-block; font-style: normal; }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invisi/flaticon-uicons",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Flaticon UIcons font icon package with local explorer and webfonts.",
   "license": "SEE LICENSE IN README",
   "main": "index.js",