@startupjs-ui/icon 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/icon
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **icon:** refactor Icon component ([70237be](https://github.com/startupjs/startupjs-ui/commit/70237be3cd372154f1010def67735ef08db0c02a))
+* **startupjs-ui:** move UiProvider and the main ui plugin into startupjs-ui package ([deeefaa](https://github.com/startupjs/startupjs-ui/commit/deeefaa8ca104efc835d1ff207d5450a83a5f484))

package/CustomIconExample.svg

@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 128 128" width="512" xmlns="http://www.w3.org/2000/svg"><path d="M86.616 36.13v76.355a9.209 9.209 0 01-9.209 9.209H35.243a9.209 9.209 0 01-9.209-9.209V36.13z" /><path d="M88.076 24.1c0-.053.008-.1.008-.157a8.515 8.515 0 00-8.293-8.721 8.071 8.071 0 00-5.953 2.657 12.3 12.3 0 00-22.818-5.6 8.342 8.342 0 00-7.863-5.964 8.515 8.515 0 00-8.293 8.721 9.281 9.281 0 00.073 1.1 7.935 7.935 0 00-1.733-.194 8.473 8.473 0 00-8.263 8.092 6.067 6.067 0 00-5.082 5.983v.051a6.07 6.07 0 006.07 6.07H48.95v29.285a3.4 3.4 0 003.4 3.4h2.184a3.4 3.4 0 003.4-3.4V53.574a3.4 3.4 0 013.4-3.4 3.4 3.4 0 003.4-3.4v-.849a3.4 3.4 0 013.4-3.4h1.275a3.4 3.4 0 013.4 3.4v5.736a3.4 3.4 0 003.4 3.4h.85a3.4 3.4 0 003.4-3.4V36.13h6.269a6.07 6.07 0 006.07-6.07v-.051a6.068 6.068 0 00-4.722-5.909z" fill="#ffde3e"/><path d="M86.616 87.483h13.418V52.517H86.616v-8.583h14.895a6.63 6.63 0 016.63 6.63v38.872a6.63 6.63 0 01-6.63 6.63H86.616z" fill="#f2e7cb"/><g fill="#422002"><path d="M26.034 90.954a1.75 1.75 0 001.75-1.75v-4.5a1.75 1.75 0 00-3.5 0v4.5a1.75 1.75 0 001.75 1.75zM36.537 106.382h24.725a1.75 1.75 0 000-3.5H36.537a1.75 1.75 0 000 3.5zM76.113 106.382a1.75 1.75 0 000-3.5h-6.639a1.75 1.75 0 100 3.5z"/><path d="M108.142 56.772a1.751 1.751 0 001.75-1.75v-4.458a8.39 8.39 0 00-8.381-8.38H88.366V37.7a7.851 7.851 0 006.175-7.693 7.769 7.769 0 00-4.765-7.2 10.222 10.222 0 00-9.985-9.343 9.639 9.639 0 00-4.736 1.236 14.079 14.079 0 00-13.5-10.144 13.93 13.93 0 00-10.216 4.4 9.9 9.9 0 00-8.185-4.4 10.237 10.237 0 00-10.011 9.627 10.2 10.2 0 00-9.787 8.442 7.85 7.85 0 00.928 15.075v38.349a1.75 1.75 0 003.5 0v-38.17H47.2v27.544a5.155 5.155 0 005.15 5.149h2.183a5.155 5.155 0 005.15-5.149V53.574a1.65 1.65 0 011.648-1.649 5.155 5.155 0 005.149-5.15v-.849a1.652 1.652 0 011.65-1.65h1.27a1.652 1.652 0 011.65 1.65v5.736a5.154 5.154 0 005.15 5.149h.85a5.154 5.154 0 005.15-5.149V37.879h2.664v74.606a7.466 7.466 0 01-7.459 7.458H35.242a7.466 7.466 0 01-7.458-7.458V97.442a1.75 1.75 0 00-3.5 0v15.043a10.971 10.971 0 0010.958 10.958h42.165a10.971 10.971 0 0010.959-10.958V97.816h13.145a8.39 8.39 0 008.381-8.38V62.7a1.75 1.75 0 00-3.5 0v26.736a4.887 4.887 0 01-4.881 4.88H88.366v-5.083h11.668a1.75 1.75 0 001.75-1.75V52.517a1.75 1.75 0 00-1.75-1.75H88.366v-5.083h13.145a4.887 4.887 0 014.881 4.88v4.458a1.75 1.75 0 001.75 1.75zm-27.69-22.393a1.75 1.75 0 00-1.75 1.75v15.533a1.651 1.651 0 01-1.649 1.649H76.2a1.651 1.651 0 01-1.649-1.649v-5.736a5.155 5.155 0 00-5.15-5.15H68.13a5.155 5.155 0 00-5.15 5.15v.849a1.651 1.651 0 01-1.649 1.65 5.154 5.154 0 00-5.148 5.149v11.849a1.651 1.651 0 01-1.65 1.649H52.35a1.651 1.651 0 01-1.65-1.649V36.129a1.75 1.75 0 00-1.75-1.75H25.929a4.344 4.344 0 01-.7-8.626 1.749 1.749 0 001.462-1.608 6.747 6.747 0 016.509-6.461 6.186 6.186 0 011.352.152 1.75 1.75 0 002.12-1.919 7.443 7.443 0 01-.061-.89 6.775 6.775 0 016.543-6.97 6.585 6.585 0 016.2 4.742 1.75 1.75 0 003.166.377 10.548 10.548 0 0119.573 4.8 1.751 1.751 0 003.034 1.081 6.3 6.3 0 014.666-2.093 6.765 6.765 0 016.541 6.936c0 .03-.007.134-.008.164a1.751 1.751 0 001.361 1.736 4.346 4.346 0 01-.966 8.577zm17.832 19.888v31.466h-9.918V54.267z"/><path d="M66.863 21.644a6.451 6.451 0 10-12.9 0 1.75 1.75 0 003.5 0 2.951 2.951 0 115.9 0 1.75 1.75 0 103.5 0zM43.343 20.159A7.048 7.048 0 0036.3 27.2a1.75 1.75 0 003.5 0 3.541 3.541 0 117.082 0 1.75 1.75 0 103.5 0 7.048 7.048 0 00-7.039-7.041zM72.137 24.513a6.339 6.339 0 00-6.331 6.332 1.75 1.75 0 003.5 0 2.832 2.832 0 115.663 0 1.75 1.75 0 003.5 0 6.34 6.34 0 00-6.332-6.332z"/></g></svg>

package/README.mdx

@@ -0,0 +1,138 @@
+import { useState } from 'react'
+import Icon, { _PropsJsonSchema as IconPropsJsonSchema } from './index'
+import Div from '@startupjs-ui/div'
+import Br from '@startupjs-ui/br'
+import TextInput from '@startupjs-ui/text-input'
+import {
+  faHouseUser,
+  faTable,
+  faShareAlt
+} from '@fortawesome/free-solid-svg-icons'
+import CustomIconExample from './CustomIconExample.svg'
+import { Sandbox } from '@startupjs-ui/docs'
+import './index.mdx.cssx.styl'
+
+# Icon
+
+Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
+
+```jsx
+import { Icon } from 'startupjs-ui'
+```
+
+## Simple example
+
+Component uses `@fortawesome/react-native-fontawesome` library to implement icons.
+
+```jsx
+import { faHouseUser } from '@fortawesome/free-solid-svg-icons'
+```
+
+```jsx example
+return (
+  <Icon icon={faHouseUser} />
+)
+```
+
+## Custom Icon
+
+To use your custom icon you must provide a valid `svg` icon to `icon` property
+
+```jsx
+import CustomIconExample from './CustomIconExample.svg'
+```
+
+```jsx example
+return (
+  <Icon
+    size={50}
+    styleName='icon orange'
+    icon={CustomIconExample}
+  />
+)
+```
+
+## Sizes
+
+Size can be modified using the `size` prop. Default value is `m`. Pre defined icon size values are `xs`, `s`, `m`, `l`, `xl`, `xxl`. Size can also be arbitarily increased or decreased by providing a number to `size` prop. For a custom icon, you can set a different size of width and height using styles.
+
+```jsx
+import {
+  faHouseUser,
+  faTable,
+  faShareAlt
+} from '@fortawesome/free-solid-svg-icons'
+import CustomIconExample from './CustomIconExample.svg'
+```
+
+```jsx example
+const [numSize, setNumSize] = useState('80')
+return (
+  <>
+    <Div row align='around'>
+      <Icon size='xs' icon={faShareAlt} />
+      <Icon size='s' icon={faHouseUser} />
+      <Icon icon={faTable} />
+      <Icon size='l' icon={faShareAlt} />
+      <Icon size='xl' icon={faHouseUser} />
+      <Icon size='xxl' icon={faTable} />
+      <Icon style={{ width: 40, height: 32 }} icon={CustomIconExample} />
+    </Div>
+    <Br />
+    <TextInput
+      label='Type in number to change icon size'
+      value={numSize}
+      onChangeText={value => setNumSize(value)}
+    />
+    <Br />
+    <Icon size={+numSize} icon={faTable} />
+  </>
+)
+```
+
+## Colors
+
+Color can be set by specifying the `color` in StyleSheet.
+
+In `.styl` file
+```stylus
+.icon
+  &.primary
+    color var(--color-text-primary)
+
+  &.success
+    color var(--color-text-success)
+
+  &.orange
+    color var(--color-text-attention)
+```
+
+```jsx
+import {
+  faHouseUser,
+  faTable,
+  faShareAlt
+} from '@fortawesome/free-solid-svg-icons'
+```
+
+```jsx example
+return (
+  <Div row align='around'>
+    <Icon icon={faShareAlt} styleName='icon orange'/>
+    <Icon icon={faHouseUser} styleName='icon primary'/>
+    <Icon icon={faTable} styleName='icon success'/>
+  </Div>
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Icon}
+  propsJsonSchema={IconPropsJsonSchema}
+  extraParams={{
+    icon: {
+      showIconSelect: true
+    }
+  }}
+/>

package/globalCustomIcons.ts

@@ -0,0 +1,5 @@
+export const customIcons: Record<string, any> = {}
+
+export function setCustomIcons (newCustomIcons: Record<string, any> = {}) {
+  Object.assign(customIcons, newCustomIcons)
+}

package/index.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+declare const _default: import("react").ComponentType<IconProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface IconProps {
+    /** Custom styles applied to the icon */
+    style?: any;
+    /** Icon definition from FontAwesome, custom component or registered name */
+    icon: object | string | (() => any);
+    /** Icon size preset or numeric value @default 'm' */
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | number;
+}

package/index.mdx.cssx.styl

@@ -0,0 +1,9 @@
+.icon
+  &.primary
+    color var(--color-text-primary)
+
+  &.success
+    color var(--color-text-success)
+
+  &.orange
+    color var(--color-text-attention)

package/index.tsx

@@ -0,0 +1,82 @@
+import { type ReactNode } from 'react'
+import { StyleSheet, Platform } from 'react-native'
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
+import { pug, observer, u } from 'startupjs'
+import { Colors, themed, useColors } from '@startupjs-ui/core'
+import { customIcons } from './globalCustomIcons'
+
+const SIZES = {
+  xs: u(1),
+  s: u(1.5),
+  m: u(2),
+  l: u(2.5),
+  xl: u(3),
+  xxl: u(3.5)
+}
+
+export default observer(themed('Icon', Icon))
+
+export const _PropsJsonSchema = {/* IconProps */}
+
+export interface IconProps {
+  /** Custom styles applied to the icon */
+  style?: any
+  /** Icon definition from FontAwesome, custom component or registered name */
+  icon: object | string | (() => any)
+  /** Icon size preset or numeric value @default 'm' */
+  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | number
+}
+
+function Icon ({
+  style,
+  icon,
+  size = 'm',
+  ...props
+}: IconProps): ReactNode {
+  const getColor = useColors()
+  const _size = typeof size === 'string' ? SIZES[size] : size
+
+  if (!icon) return null
+
+  let CustomIcon
+
+  style = StyleSheet.flatten([{ color: getColor(Colors['text-secondary']) }, style])
+
+  if (typeof icon === 'function') {
+    CustomIcon = icon
+  } else if (typeof icon === 'string') {
+    CustomIcon = customIcons[icon]
+  }
+
+  if (CustomIcon) {
+    const { color: fill, width = _size, height = _size, ...iconStyle } = style
+    return pug`
+      CustomIcon(
+        style=iconStyle
+        width=width
+        height=height
+        fill=fill
+      )
+    `
+  }
+
+  if (Platform.OS === 'web') {
+    style.width ??= _size
+    style.height ??= _size
+    style.outline ??= 'none'
+    return pug`
+      FontAwesomeIcon(
+        style=style
+        icon=icon
+      )
+    `
+  }
+
+  return pug`
+    FontAwesomeIcon(
+      style=style
+      icon=icon
+      size=_size
+    )
+  `
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@startupjs-ui/icon",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": "./index.tsx",
+    "./globalCustomIcons": "./globalCustomIcons.ts"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@fortawesome/react-native-fontawesome": "^0.3.0",
+    "@startupjs-ui/core": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}