@brickflow/ui 0.0.44 → 0.0.45

package/dist/module.json

@@ -4,7 +4,7 @@
   },
   "configKey": "brickflowUi",
   "name": "@brickflow/ui",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,18 +1,13 @@
 import { defineNuxtModule, createResolver, resolvePath, addTypeTemplate, addTemplate, updateTemplates, addImportsDir, addComponentsDir } from '@nuxt/kit';
 import tailwindcss from '@tailwindcss/vite';
 import { createJiti } from 'jiti';
-import { readdir, mkdir, readFile, writeFile } from 'node:fs/promises';
-import { join, basename, extname, dirname, resolve, relative } from 'node:path';
+import { readdir, readFile } from 'node:fs/promises';
+import { basename, extname, dirname, resolve, relative, join } from 'node:path';
 import { isBrickflowUiStyleReference, getBrickflowUiStyleReferencePath, defineBrickflowUi } from '../dist/runtime/tailwind.js';
-import { generateFonts, FontAssetType, OtherAssetType } from 'fantasticon';
+import { getIconFontCssPath as getIconFontCssPath$1, generateIcons } from '@brickflow/cli/icon';
 
 const ICON_FILE_PATTERN = /\.svg$/i;
-const minifyCss = (css) => css.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\s+/g, " ").replace(/\s*([{}:;,>+~])\s*/g, "$1").replace(/;\}/g, "}").trim();
-const normalizeGeneratedCss = (css) => `${css.replace(/"/g, "'").replace(/^ {4}/gm, "  ").replace(/(\.(?:eot|ttf|woff2?))\?[^#'")]+(#iefix)?/gi, "$1$2").replace(/src: ([^\n]+),\n([^\n]+),\n([^\n]+);/, "src:\n    $1,\n    $2,\n    $3;").replace(
-  /i\[class\^='icon-'\]:before, i\[class\*=' icon-'\]:before \{/,
-  "@layer base {\n  i[class^='icon-'],\n  i[class*=' icon-'] {\n    container-type: inline-size;\n    display: inline-flex;justify-content: center;align-items: center;\n    width: 1em;\n  }\n}\n\ni[class^='icon-']:before,\ni[class*=' icon-']:before {\n  font-size: 100cqw;"
-).replace(/\n{3,}/g, "\n\n").trim()}
-`;
+const ICON_FONT_NAME = "brickflow-icon";
 const getIconFontNames = async (inputDir) => {
   const entries = await readdir(inputDir, { withFileTypes: true });
   const invalidEntries = entries.filter((entry) => !entry.isFile() || !ICON_FILE_PATTERN.test(entry.name));
@@ -26,7 +21,7 @@ const getIconFontNames = async (inputDir) => {
   }
   return entries.map((entry) => entry.name.replace(ICON_FILE_PATTERN, "")).sort((a, b) => a.localeCompare(b));
 };
-const getIconFontCssPath = (outputDir) => join(outputDir, "icon.minify.css");
+const getIconFontCssPath = (outputDir) => getIconFontCssPath$1(outputDir, ICON_FONT_NAME);
 const createIconFontAssetsInlineLimit = (outputDir, currentLimit) => {
   const normalizedOutputDir = outputDir.replaceAll("\\", "/");
   return (filePath, content) => {
@@ -41,20 +36,11 @@ const createIconFontAssetsInlineLimit = (outputDir, currentLimit) => {
 };
 const generateIconFont = async ({ inputDir, outputDir }) => {
   await getIconFontNames(inputDir);
-  await mkdir(outputDir, { recursive: true });
-  await generateFonts({
-    assetTypes: [OtherAssetType.CSS],
-    fontsUrl: ".",
-    fontTypes: [FontAssetType.EOT, FontAssetType.WOFF2, FontAssetType.WOFF],
+  await generateIcons({
     inputDir,
-    name: "icon",
-    normalize: true,
+    name: ICON_FONT_NAME,
     outputDir
   });
-  const cssPath = join(outputDir, "icon.css");
-  const css = normalizeGeneratedCss(await readFile(cssPath, "utf8"));
-  await writeFile(cssPath, css);
-  await writeFile(getIconFontCssPath(outputDir), minifyCss(css));
 };
 const brickflowUiIconFontPlugin = (options) => ({
   buildStart: () => generateIconFont(options),

package/dist/runtime/components/Icon/basic.demo.vue

@@ -43,5 +43,20 @@
         class="text-2xl text-red-400"
       />
     </div>
+
+    <p>
+      Text with icon
+      <Icon :name="iconName" />
+      sample words.
+    </p>
+
+    <div class="flex items-start gap-2">
+      <div class="bg-gray-700">
+        <Icon :name="iconName" />
+      </div>
+      <div class="bg-gray-700 leading-0">
+        <Icon :name="iconName" />
+      </div>
+    </div>
   </div>
 </template>

package/dist/runtime/components/Icon/index.vue

@@ -18,7 +18,28 @@
 <template>
   <i
     v-bind="$attrs"
-    :class="[classes, 'aspect-square']"
+    :class="classes"
     role="img"
   />
 </template>
+
+<style scoped>
+  @layer base {
+    i {
+      aspect-ratio: 1;
+      container-type: inline-size;
+      display: inline-flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 1em;
+      line-height: 1;
+      vertical-align: -0.125em;
+    }
+
+    i::before {
+      font-size: 100cqi;
+      line-height: 1;
+    }
+  }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickflow/ui",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "type": "module",
   "description": "brickflow UI Nuxt module.",
   "files": [
@@ -33,8 +33,8 @@
     "access": "public"
   },
   "dependencies": {
+    "@brickflow/cli": "workspace:*",
     "@tailwindcss/vite": "4.3.3",
-    "fantasticon": "4.1.0",
     "jiti": "2.7.0",
     "tailwindcss": "4.3.3"
   },