@1doc/1ds-react 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @1doc/1ds-react
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @1doc/1ds-tokens@0.1.0

package/README.md

@@ -10,13 +10,14 @@ pnpm add @1doc/1ds-react @1doc/1ds-tokens
 
 ## Configuração
 
-Importe o CSS dos tokens no seu arquivo principal (`App.tsx` ou `main.tsx`):
+> [!IMPORTANT]
+> Para que os componentes sejam renderizados corretamente, você **deve** importar o CSS dos tokens e da biblioteca de ícones no ponto de entrada da sua aplicação (geralmente `App.tsx` ou `main.tsx`). Sem esses imports, os estilos e ícones não serão aplicados.
 
 ```tsx
 import "@1doc/1ds-tokens/dist/css/primitives.css";
 import "@1doc/1ds-tokens/dist/css/semantic.css";
 import "@1doc/1ds-tokens/dist/css/theme-1doc.css";
-import "iconoir/css/iconoir.css";
+// Icons are loaded via Icon component
 ```
 
 ## Uso

package/dist/components/Icon/Icon.css

@@ -3,11 +3,25 @@
     align-items: center;
     justify-content: center;
     line-height: 1;
+    position: relative;
 }
 
 .umds-icon svg {
+    display: inline-block;
     width: 1em;
     height: 1em;
+    vertical-align: -0.125em;
+    margin-right: 0;
+}
+
+.umds-icon svg.svg-inline--fa {
+    font-family: var(--fa-font-awesome);
+    font-weight: 900;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 /* Sizes */
@@ -38,4 +52,4 @@
 
 .umds-icon--inherit {
     color: inherit;
-}
+}

package/dist/components/Icon/Icon.d.ts

@@ -1,6 +1,7 @@
 import './Icon.css';
 export interface IconProps {
     name?: string;
+    prefix?: "fas" | "far" | "fal" | "fat" | "fad";
     component?: any;
     size?: "sm" | "md" | "lg";
     customSize?: string;

package/dist/components/Icon/Icon.js

@@ -1,10 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './Icon.css';
+import { library, findIconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/pro-solid-svg-icons";
+import { far } from "@fortawesome/pro-regular-svg-icons";
+import { fal } from "@fortawesome/pro-light-svg-icons";
+import { fat } from "@fortawesome/pro-thin-svg-icons";
+import { fad } from "@fortawesome/pro-duotone-svg-icons";
+library.add(fas, far, fal, fat, fad);
 function Icon(props) {
+    function iconDefinition() {
+        if (!props.name)
+            return null;
+        const prefix = props.prefix ?? "fas";
+        return findIconDefinition({ prefix, iconName: props.name }) ?? null;
+    }
     function classes() {
         return [
             "umds-icon",
-            props.name ? `iconoir-${props.name}` : "",
             // Only apply size class if customSize is not provided
             props.customSize ? "" : `umds-icon--${props.size || "md"}`,
             `umds-icon--${props.variant || "inherit"}`,
@@ -24,6 +36,6 @@ function Icon(props) {
         }
         return undefined;
     }
-    return (_jsx("span", { style: style(), ...props, className: classes(), children: props.component ? _jsx(props.component, {}) : null }));
+    return (_jsxs("span", { style: style(), "data-icon": props.name, ...props, className: classes(), children: [iconDefinition() ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "svg-inline--fa", viewBox: `0 0 ${iconDefinition().icon[0]} ${iconDefinition().icon[1]}`, children: Array.isArray(iconDefinition().icon[4]) ? (_jsxs(_Fragment, { children: [_jsx("path", { fill: "currentColor", className: "fa-secondary", opacity: 0.4, d: iconDefinition().icon[4][0] }), _jsx("path", { fill: "currentColor", className: "fa-primary", d: iconDefinition().icon[4][1] })] })) : (_jsx(_Fragment, { children: _jsx("path", { fill: "currentColor", d: iconDefinition().icon[4] }) })) })) : null, props.component ? _jsx(props.component, {}) : null] }));
 }
 export default Icon;

package/package.json

@@ -1,17 +1,35 @@
 {
   "name": "@1doc/1ds-react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
-    "iconoir": "^7.11.0",
-    "@1doc/1ds-tokens": "0.0.1"
+    "@fortawesome/duotone-light-svg-icons": "^7.2.0",
+    "@fortawesome/duotone-regular-svg-icons": "^7.2.0",
+    "@fortawesome/duotone-thin-svg-icons": "^7.2.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.0",
+    "@fortawesome/free-solid-svg-icons": "^6.5.0",
+    "@fortawesome/pro-duotone-svg-icons": "^7.2.0",
+    "@fortawesome/pro-light-svg-icons": "^7.2.0",
+    "@fortawesome/pro-regular-svg-icons": "^7.2.0",
+    "@fortawesome/pro-solid-svg-icons": "^7.2.0",
+    "@fortawesome/pro-thin-svg-icons": "^7.2.0",
+    "@fortawesome/sharp-duotone-light-svg-icons": "^7.2.0",
+    "@fortawesome/sharp-duotone-regular-svg-icons": "^7.2.0",
+    "@fortawesome/sharp-duotone-solid-svg-icons": "^7.2.0",
+    "@fortawesome/sharp-duotone-thin-svg-icons": "^7.2.0",
+    "@fortawesome/sharp-light-svg-icons": "^7.2.0",
+    "@fortawesome/sharp-regular-svg-icons": "^7.2.0",
+    "@fortawesome/sharp-solid-svg-icons": "^7.2.0",
+    "@fortawesome/sharp-thin-svg-icons": "^7.2.0",
+    "@fortawesome/vue-fontawesome": "^3.1.0",
+    "@1doc/1ds-tokens": "0.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "react": "^18.0.0",
     "typescript": "^5.0.0",
-    "@1doc/1ds-core": "0.0.1"
+    "@1doc/1ds-core": "0.0.2"
   },
   "peerDependencies": {
     "react": ">=18"