@phila/phila-ui-core 3.0.0-beta.6 → 3.0.0-beta.8

package/NOTICE.md

@@ -0,0 +1,30 @@
+# Third-party icon attribution
+
+The `@phila/phila-ui-core` package bundles icon glyphs from third-party sources.
+This file provides the attribution required by their licenses.
+
+## Font Awesome Free
+
+All icons are sourced from [Font Awesome Free](https://fontawesome.com).
+
+- **Icons:** licensed under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/).
+- **Copyright:** © Fonticons, Inc.
+
+Icons are delivered two ways:
+
+- **Vue components** — SVG files in `src/icons/svg/` are compiled to Vue functional
+  components by `vite-svg-loader` and exported from the `@phila/phila-ui-core/icons`
+  entry point. Use these with the `<Icon>` component or directly as `<component :is="...">`.
+- **CSS sidecar** — the same SVGs are also encoded into `dist/phila-icons.css`
+  (exported as `@phila/phila-ui-core/icons.css`) as `.phila-icon-<name>` CSS mask
+  classes. Use these in non-Vue contexts as a drop-in for `<i class="fas fa-...">` markup.
+  The base class is `.phila-icon`; individual icons are `.phila-icon-<name>`.
+
+The source SVG files in `src/icons/svg/` retain the original Font Awesome license
+header comment for traceability.
+
+## Modifications
+
+Icons may be normalized for inclusion in this library: redundant `width`,
+`height`, `id`, and `<desc>` attributes are stripped; `fill` is forced to
+`currentColor` where needed so glyphs inherit text color.

package/README.md

@@ -32,83 +32,37 @@ npm install @phila/phila-ui-core
 
 ### Icons
 
-The Phila UI design system uses [FontAwesome Pro](https://fontawesome.com/) for icons. Some components are bundled with static icons (FontAwesome Pro, version 7.0.1). To use additional icons throughout your application, you need to install FontAwesome and set the required NPM tokens in your environment.
+The Phila UI design system uses bundled SVG icons sourced from [Font Awesome Free](https://fontawesome.com) (CC BY 4.0). All icons are embedded directly in the package — no external icon font or auth token required.
 
-```bash
-pnpm install @fortawesome/fontawesome-pro
-```
+#### Using icons in components
 
-In a Vue project, you can import the CSS in your main entry file:
-
-```typescript
-import "@fortawesome/fontawesome-pro/css/fontawesome.min.css";
-import "@fortawesome/fontawesome-pro/css/solid.min.css";
-```
-
-If using nuxt, add the following to your `nuxt.config.ts`:
-
-```typescript
-import { defineNuxtConfig } from "nuxt";
-
-export default defineNuxtConfig({
-  css: ["@fortawesome/fontawesome-pro/css/fontawesome.min.css", "@fortawesome/fontawesome-pro/css/solid.min.css"],
-});
-```
-
-In your project folder, create a `.npmrc` file with the following content:
-
-```
-@fortawesome:registry=https://npm.fontawesome.com/
-//npm.fontawesome.com/:_authToken=${NPM_FONTAWESOME_SECRET}
-```
-
-### Building components with icons
-
-When building a component that uses a specific icon, you need to import the icon from the FontAwesome svg package and set it as a prop to the FontAwesome vue component.
-
-```bash
-pnpm install --save-dev @fortawesome/fontawesome-svg-core @fortawesome/pro-regular-svg-icons @fortawesome/vue-fontawesome
-```
+Import named icon components from `@phila/phila-ui-core/icons` and pass them to the `Icon` component via the `icon` prop:
 
 ```vue
-<script lang="ts" setup>
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faUser } from "@fortawesome/pro-solid-svg-icons";
+<script setup lang="ts">
+import { Icon } from "@phila/phila-ui-core";
+import { IconMagnifyingGlass, IconArrowRight } from "@phila/phila-ui-core/icons";
 </script>
+
 <template>
-  ...
-  <FontAwesomeIcon :icon="faUser" />
-  ...
+  <Icon :icon="IconMagnifyingGlass" aria-label="Search" />
+  <Icon :icon="IconArrowRight" decorative />
 </template>
 ```
 
-Additionally, you will need to configure vite.config.ts to treat the FontAwesome packages as external dependencies:
-
-In packages/your-component/vite.config.ts:
+When building a component that uses icons, add `@phila/phila-ui-core/icons` to your `vite.config.ts` externals:
 
 ```typescript
-export default defineConfig({
-  ...
-  build: {
-    ...
-    rollupOptions: {
-      external: ["other dependencies...", "@fortawesome/vue-fontawesome"],
-      ...
-    },
-   ...
-  },
-});
+rollupOptions: {
+  external: ["vue", "@phila/phila-ui-core", "@phila/phila-ui-core/icons"],
+}
 ```
 
-And add vue-fontawesome as a peer dependency in your component's package.json:
+#### Adding new icons
 
-```json
-"peerDependencies": {
-  ...
-  "@fortawesome/vue-fontawesome": "^3.1.2",
-  ...
-}
-```
+1. Copy the SVG into `packages/core/src/icons/svg/<name>.svg` (follow Font Awesome's filename conventions, e.g. `arrow-right.svg`).
+2. Run `pnpm --filter @phila/phila-ui-core build` — the icon index and CSS sidecar regenerate automatically.
+3. Import the new export: `import { Icon<PascalCase> } from "@phila/phila-ui-core/icons"`.
 
 ### Phila UI Core Styles (Light mode):
 

package/dist/icons.d.ts

@@ -0,0 +1,371 @@
+import { FunctionalComponent } from 'vue';
+import { SVGAttributes } from 'vue';
+
+export declare const IconAdd: IconComponent;
+
+export declare const IconAmbulance: IconComponent;
+
+export declare const IconAndroid: IconComponent;
+
+export declare const IconApple: IconComponent;
+
+export declare const IconArrowDown: IconComponent;
+
+export declare const IconArrowLeft: IconComponent;
+
+export declare const IconArrowRight: IconComponent;
+
+export declare const IconArrowUp: IconComponent;
+
+export declare const IconArrowUpFromGroundWater: IconComponent;
+
+export declare const IconAt: IconComponent;
+
+export declare const IconBaby: IconComponent;
+
+export declare const IconBackwardFast: IconComponent;
+
+export declare const IconBackwardStep: IconComponent;
+
+export declare const IconBan: IconComponent;
+
+export declare const IconBars: IconComponent;
+
+export declare const IconBed: IconComponent;
+
+export declare const IconBell: IconComponent;
+
+export declare const IconBook: IconComponent;
+
+export declare const IconBookOpen: IconComponent;
+
+export declare const IconBookOpenReader: IconComponent;
+
+export declare const IconBoxArchive: IconComponent;
+
+export declare const IconBriefcase: IconComponent;
+
+export declare const IconBuilding: IconComponent;
+
+export declare const IconBuildingColumns: IconComponent;
+
+export declare const IconBuildingUser: IconComponent;
+
+export declare const IconBullhorn: IconComponent;
+
+export declare const IconBus: IconComponent;
+
+export declare const IconCalculator: IconComponent;
+
+export declare const IconCalendar: IconComponent;
+
+export declare const IconCalendarCheck: IconComponent;
+
+export declare const IconCalendarDays: IconComponent;
+
+export declare const IconCalendarPlus: IconComponent;
+
+export declare const IconCalendarWeek: IconComponent;
+
+export declare const IconCamera: IconComponent;
+
+export declare const IconCar: IconComponent;
+
+export declare const IconCaretDown: IconComponent;
+
+export declare const IconCaretLeft: IconComponent;
+
+export declare const IconCaretRight: IconComponent;
+
+export declare const IconCaretUp: IconComponent;
+
+export declare const IconCertificate: IconComponent;
+
+export declare const IconChalkboardUser: IconComponent;
+
+export declare const IconChartPie: IconComponent;
+
+export declare const IconCheck: IconComponent;
+
+export declare const IconChevronDown: IconComponent;
+
+export declare const IconChevronLeft: IconComponent;
+
+export declare const IconChevronRight: IconComponent;
+
+export declare const IconChevronUp: IconComponent;
+
+export declare const IconCircleCheck: IconComponent;
+
+export declare const IconCircleDollarToSlot: IconComponent;
+
+export declare const IconCircleExclamation: IconComponent;
+
+export declare const IconCircleInfo: IconComponent;
+
+export declare const IconCircleQuestion: IconComponent;
+
+export declare const IconCircleRadiation: IconComponent;
+
+export declare const IconClipboard: IconComponent;
+
+export declare const IconClock: IconComponent;
+
+export declare const IconClose: IconComponent;
+
+export declare const IconCloudRain: IconComponent;
+
+export declare const IconCloudShowersHeavy: IconComponent;
+
+export declare const IconCommentDots: IconComponent;
+
+export declare const IconComments: IconComponent;
+
+export declare const IconCommentsDollar: IconComponent;
+
+export declare const IconCompass: IconComponent;
+
+/** An SVG icon rendered as a Vue functional component. */
+export declare type IconComponent = FunctionalComponent<SVGAttributes>;
+
+export declare const IconCopy: IconComponent;
+
+export declare const IconCreditCard: IconComponent;
+
+export declare const IconDesktop: IconComponent;
+
+export declare const IconDollarSign: IconComponent;
+
+export declare const IconDownload: IconComponent;
+
+export declare const IconDroplet: IconComponent;
+
+export declare const IconEarthAmericas: IconComponent;
+
+export declare const IconEnvelope: IconComponent;
+
+export declare const IconEnvelopeOpenText: IconComponent;
+
+export declare const IconFacebook: IconComponent;
+
+export declare const IconFile: IconComponent;
+
+export declare const IconFileArrowUp: IconComponent;
+
+export declare const IconFileContract: IconComponent;
+
+export declare const IconFileExport: IconComponent;
+
+export declare const IconFileImage: IconComponent;
+
+export declare const IconFileInvoiceDollar: IconComponent;
+
+export declare const IconFileLines: IconComponent;
+
+export declare const IconFire: IconComponent;
+
+export declare const IconFireExtinguisher: IconComponent;
+
+export declare const IconFlag: IconComponent;
+
+export declare const IconFlickr: IconComponent;
+
+export declare const IconFolder: IconComponent;
+
+export declare const IconFolderOpen: IconComponent;
+
+export declare const IconForwardFast: IconComponent;
+
+export declare const IconForwardStep: IconComponent;
+
+export declare const IconGauge: IconComponent;
+
+export declare const IconGavel: IconComponent;
+
+export declare const IconGear: IconComponent;
+
+export declare const IconGears: IconComponent;
+
+export declare const IconGithub: IconComponent;
+
+export declare const IconGlobe: IconComponent;
+
+export declare const IconHandHoldingHeart: IconComponent;
+
+export declare const IconHandshake: IconComponent;
+
+export declare const IconHandshakeAngle: IconComponent;
+
+export declare const IconHeart: IconComponent;
+
+export declare const IconHeartPulse: IconComponent;
+
+export declare const IconHourglass: IconComponent;
+
+export declare const IconHouse: IconComponent;
+
+export declare const IconHouseCrack: IconComponent;
+
+export declare const IconHouseFloodWater: IconComponent;
+
+export declare const IconHouseSignal: IconComponent;
+
+export declare const IconIdBadge: IconComponent;
+
+export declare const IconImage: IconComponent;
+
+export declare const IconInstagram: IconComponent;
+
+export declare const IconLandmark: IconComponent;
+
+export declare const IconLanguage: IconComponent;
+
+export declare const IconLayerGroup: IconComponent;
+
+export declare const IconLeaf: IconComponent;
+
+export declare const IconLifeRing: IconComponent;
+
+export declare const IconLightbulb: IconComponent;
+
+export declare const IconLink: IconComponent;
+
+export declare const IconLinkedinIn: IconComponent;
+
+export declare const IconList: IconComponent;
+
+export declare const IconListCheck: IconComponent;
+
+export declare const IconLocationArrow: IconComponent;
+
+export declare const IconLocationCrosshairs: IconComponent;
+
+export declare const IconLocationDot: IconComponent;
+
+export declare const IconLocationPin: IconComponent;
+
+export declare const IconLock: IconComponent;
+
+export declare const IconMagnifyingGlass: IconComponent;
+
+export declare const IconMagnifyingGlassLocation: IconComponent;
+
+export declare const IconMagnifyingGlassPlus: IconComponent;
+
+export declare const IconMap: IconComponent;
+
+export declare const IconMapLocationDot: IconComponent;
+
+export declare const IconMicrophone: IconComponent;
+
+export declare const IconMinus: IconComponent;
+
+export declare const IconMobileScreenButton: IconComponent;
+
+export declare const IconMoneyBillWave: IconComponent;
+
+export declare const IconMoneyCheckDollar: IconComponent;
+
+export declare const IconNewspaper: IconComponent;
+
+export declare const IconPaintRoller: IconComponent;
+
+export declare const IconPalette: IconComponent;
+
+export declare const IconPaste: IconComponent;
+
+export declare const IconPause: IconComponent;
+
+export declare const IconPencil: IconComponent;
+
+export declare const IconPercent: IconComponent;
+
+export declare const IconPerson: IconComponent;
+
+export declare const IconPersonMilitaryPointing: IconComponent;
+
+export declare const IconPersonWalking: IconComponent;
+
+export declare const IconPhone: IconComponent;
+
+export declare const IconPlay: IconComponent;
+
+export declare const IconPrescriptionBottleMedical: IconComponent;
+
+export declare const IconPrint: IconComponent;
+
+export declare const IconQuestion: IconComponent;
+
+export declare const IconRecycle: IconComponent;
+
+export declare const IconRoad: IconComponent;
+
+export declare const IconRotateRight: IconComponent;
+
+export declare const IconScaleBalanced: IconComponent;
+
+export declare const IconSchool: IconComponent;
+
+export declare const IconScroll: IconComponent;
+
+export declare const IconSection: IconComponent;
+
+export declare const IconShareNodes: IconComponent;
+
+export declare const IconShield: IconComponent;
+
+export declare const IconShirt: IconComponent;
+
+export declare const IconSliders: IconComponent;
+
+export declare const IconSnowflake: IconComponent;
+
+export declare const IconSoccerBall: IconComponent;
+
+export declare const IconSort: IconComponent;
+
+export declare const IconSprayCan: IconComponent;
+
+export declare const IconSquareCheck: IconComponent;
+
+export declare const IconStar: IconComponent;
+
+export declare const IconStreetView: IconComponent;
+
+export declare const IconSuitcaseMedical: IconComponent;
+
+export declare const IconTemperatureFull: IconComponent;
+
+export declare const IconThumbtack: IconComponent;
+
+export declare const IconTrashCan: IconComponent;
+
+export declare const IconTree: IconComponent;
+
+export declare const IconTriangleExclamation: IconComponent;
+
+export declare const IconUpRightFromSquare: IconComponent;
+
+export declare const IconUser: IconComponent;
+
+export declare const IconUsers: IconComponent;
+
+export declare const IconUserSlash: IconComponent;
+
+export declare const IconUtensils: IconComponent;
+
+export declare const IconVideo: IconComponent;
+
+export declare const IconWater: IconComponent;
+
+export declare const IconWheelchair: IconComponent;
+
+export declare const IconWifi: IconComponent;
+
+export declare const IconWrench: IconComponent;
+
+export declare const IconXTwitter: IconComponent;
+
+export declare const IconYoutube: IconComponent;
+
+export { }