@emblamedical/icons-react 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +115 -0
  2. package/dist/index.d.ts +146 -0
  3. package/dist/index.esm.js +1806 -0
  4. package/dist/index.js +1972 -0
  5. package/package.json +35 -0
package/README.md ADDED
@@ -0,0 +1,115 @@
1
+ # @emblamedical/icons-react
2
+
3
+ React components for all icons and iconographics from `@emblamedical/icons`.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ yarn add @emblamedical/icons-react
9
+ ```
10
+
11
+ React 16.8+ is required as a peer dependency.
12
+
13
+ ## Usage
14
+
15
+ Each SVG is exported as a React component in PascalCase. Icons from the `iconographics` directory are suffixed with `Iconographic` when their name conflicts with a regular icon.
16
+
17
+ ```tsx
18
+ import { ArrowRight, Check, PhotoOutlined } from '@emblamedical/icons-react';
19
+ import { Calendar } from '@emblamedical/icons-react';
20
+
21
+ // Use like any SVG component
22
+ <ArrowRight />
23
+ <Check className="icon" />
24
+ <PhotoOutlined width={24} height={24} fill="currentColor" />
25
+ <HospitalShield />
26
+ ```
27
+
28
+ All components accept standard SVG props (`className`, `width`, `height`, `fill`, `stroke`, etc.).
29
+
30
+ ## Iconographics
31
+
32
+ Larger illustration-style SVGs are exported the same way:
33
+
34
+ ```tsx
35
+ import { Calendar, Lock, CalendarIconographic } from '@emblamedical/icons-react';
36
+
37
+ <Calendar />
38
+ <Lock />
39
+ // "calendar" exists in both icons and iconographics – the iconographic is suffixed
40
+ <CalendarIconographic />
41
+ ```
42
+
43
+ ## Available components
44
+
45
+ All icon and iconographic names come from `@emblamedical/icons`. To get a full list at runtime:
46
+
47
+ ```ts
48
+ import { icons } from '@emblamedical/icons';
49
+
50
+ console.log(icons.available); // all icon names (kebab-case)
51
+ console.log(icons.iconographics); // all iconographic names (kebab-case)
52
+ ```
53
+
54
+ Component names are the PascalCase equivalent – e.g. `arrow-right` → `ArrowRight`.
55
+
56
+ ## Development
57
+
58
+ Components are auto-generated from the SVG files in `@emblamedical/icons`. To regenerate and rebuild:
59
+
60
+ ```bash
61
+ yarn build
62
+ ```
63
+
64
+ ## Publishing
65
+
66
+ Bump `version` in `package.json`, then either:
67
+
68
+ **From the terminal** (needs npm login or `NPM_TOKEN` env var):
69
+
70
+ ```bash
71
+ npm publish
72
+ ```
73
+
74
+ `prepublishOnly` runs `yarn build` first automatically.
75
+
76
+ **Via GitHub Actions** — go to Actions, pick "Publish @emblamedical/icons-react to npm", click "Run workflow". Requires `NPM_TOKEN` to be set in the repo's GitHub secrets.
77
+
78
+ ## Scripts
79
+
80
+ | Script | Command | Description |
81
+ |---|---|---|
82
+ | `generate` | `node scripts/generate.cjs` | Generates `generated/index.ts` with one export per SVG from `@emblamedical/icons` |
83
+ | `build` | `generate && npx rollup -c` | Generates component exports then bundles to CJS and ESM via Rollup |
84
+ | `prepublishOnly` | `yarn build` | Runs the full build automatically before publishing |
85
+ | `test` | `yarn build && node ./__tests__/icons-react.test.cjs` | Builds the package then runs the test suite |
86
+
87
+ ## Build tools
88
+
89
+ ### `scripts/generate.cjs`
90
+
91
+ Reads all `.svg` filenames from `@emblamedical/icons/icons` and `@emblamedical/icons/iconographics`, then writes `generated/index.ts` with one named re-export per SVG:
92
+
93
+ - Names are converted from kebab-case to PascalCase (e.g. `arrow-right` → `ArrowRight`)
94
+ - Names starting with a digit are prefixed with `Icon` (e.g. `360-view` → `Icon360View`)
95
+ - If the same PascalCase name appears in both `icons/` and `iconographics/`, the iconographic version is suffixed with `Iconographic` (e.g. `CalendarIconographic`)
96
+
97
+ This file is auto-generated and should not be edited manually.
98
+
99
+ ### `rollup.config.mjs`
100
+
101
+ Bundles `generated/index.ts` into two output formats:
102
+
103
+ - `dist/index.js` — CommonJS
104
+ - `dist/index.esm.js` — ES module
105
+
106
+ Plugins used:
107
+
108
+ | Plugin | Purpose |
109
+ |---|---|
110
+ | `rollup-plugin-peer-deps-external` | Excludes React from the bundle (it is a peer dependency) |
111
+ | `@svgr/rollup` | Converts each imported `.svg` file into a typed React component |
112
+ | `@rollup/plugin-node-resolve` | Resolves `node_modules` imports |
113
+ | `@rollup/plugin-typescript` | Compiles TypeScript and emits `.d.ts` declarations to `dist/` |
114
+
115
+ The SVGR plugin is configured with `dimensions: false` (removes hardcoded `width`/`height` attributes so components scale via CSS) and the same SVGO `preset-default` overrides as the source package (`removeViewBox: false`, `floatPrecision: 1`).
package/dist/index.d.ts ADDED
@@ -0,0 +1,146 @@
1
+ export { default as Icon360View } from '../../icons/icons/360-view.svg';
2
+ export { default as AdjustmentsFilled } from '../../icons/icons/adjustments-filled.svg';
3
+ export { default as AdjustmentsHorizontalFilled } from '../../icons/icons/adjustments-horizontal-filled.svg';
4
+ export { default as AdjustmentsHorizontalOutlined } from '../../icons/icons/adjustments-horizontal-outlined.svg';
5
+ export { default as AdjustmentsOutlined } from '../../icons/icons/adjustments-outlined.svg';
6
+ export { default as AlertCircleFilled } from '../../icons/icons/alert-circle-filled.svg';
7
+ export { default as AlertCircleOutlined } from '../../icons/icons/alert-circle-outlined.svg';
8
+ export { default as AlertTriangleFilled } from '../../icons/icons/alert-triangle-filled.svg';
9
+ export { default as AlertTriangleOutlined } from '../../icons/icons/alert-triangle-outlined.svg';
10
+ export { default as ArrowForward } from '../../icons/icons/arrow-forward.svg';
11
+ export { default as ArrowLeft } from '../../icons/icons/arrow-left.svg';
12
+ export { default as ArrowRight } from '../../icons/icons/arrow-right.svg';
13
+ export { default as ArrowUpRight } from '../../icons/icons/arrow-up-right.svg';
14
+ export { default as ArrowsExpand } from '../../icons/icons/arrows-expand.svg';
15
+ export { default as ArrowsUpDown } from '../../icons/icons/arrows-up-down.svg';
16
+ export { default as BellFilled } from '../../icons/icons/bell-filled.svg';
17
+ export { default as BellOutlined } from '../../icons/icons/bell-outlined.svg';
18
+ export { default as Bookmark } from '../../icons/icons/bookmark.svg';
19
+ export { default as Calendar } from '../../icons/icons/calendar.svg';
20
+ export { default as CameraFilled } from '../../icons/icons/camera-filled.svg';
21
+ export { default as CameraOutlined } from '../../icons/icons/camera-outlined.svg';
22
+ export { default as Certification } from '../../icons/icons/certification.svg';
23
+ export { default as Check } from '../../icons/icons/check.svg';
24
+ export { default as ChevronDown } from '../../icons/icons/chevron-down.svg';
25
+ export { default as ChevronLeft } from '../../icons/icons/chevron-left.svg';
26
+ export { default as ChevronRight } from '../../icons/icons/chevron-right.svg';
27
+ export { default as ChevronUp } from '../../icons/icons/chevron-up.svg';
28
+ export { default as CircleCheckFilled } from '../../icons/icons/circle-check-filled.svg';
29
+ export { default as CircleCheckOutlined } from '../../icons/icons/circle-check-outlined.svg';
30
+ export { default as CircleFilled } from '../../icons/icons/circle-filled.svg';
31
+ export { default as CircleOutlined } from '../../icons/icons/circle-outlined.svg';
32
+ export { default as CircleXfilled } from '../../icons/icons/circle-xfilled.svg';
33
+ export { default as CircleXoutlined } from '../../icons/icons/circle-xoutlined.svg';
34
+ export { default as ClockFilled } from '../../icons/icons/clock-filled.svg';
35
+ export { default as ClockOutlined } from '../../icons/icons/clock-outlined.svg';
36
+ export { default as Copy } from '../../icons/icons/copy.svg';
37
+ export { default as CopyrightFilled } from '../../icons/icons/copyright-filled.svg';
38
+ export { default as CopyrightOutlined } from '../../icons/icons/copyright-outlined.svg';
39
+ export { default as CurrentLocationFilled } from '../../icons/icons/current-location-filled.svg';
40
+ export { default as CurrentLocationOutlined } from '../../icons/icons/current-location-outlined.svg';
41
+ export { default as DiscountCheckFilled } from '../../icons/icons/discount-check-filled.svg';
42
+ export { default as DiscountCheck } from '../../icons/icons/discount-check.svg';
43
+ export { default as Dots } from '../../icons/icons/dots.svg';
44
+ export { default as Download } from '../../icons/icons/download.svg';
45
+ export { default as EmailFilled } from '../../icons/icons/email-filled.svg';
46
+ export { default as EmailOutlined } from '../../icons/icons/email-outlined.svg';
47
+ export { default as ExternalLink } from '../../icons/icons/external-link.svg';
48
+ export { default as EyeFilled } from '../../icons/icons/eye-filled.svg';
49
+ export { default as EyeOutlinedOff } from '../../icons/icons/eye-outlined-off.svg';
50
+ export { default as EyeOutlined } from '../../icons/icons/eye-outlined.svg';
51
+ export { default as Facebook } from '../../icons/icons/facebook.svg';
52
+ export { default as FileLambda } from '../../icons/icons/file-lambda.svg';
53
+ export { default as FileText } from '../../icons/icons/file-text.svg';
54
+ export { default as FileTypeDoc } from '../../icons/icons/file-type-doc.svg';
55
+ export { default as FileTypePdf } from '../../icons/icons/file-type-pdf.svg';
56
+ export { default as FilterFilled } from '../../icons/icons/filter-filled.svg';
57
+ export { default as FilterOutlined } from '../../icons/icons/filter-outlined.svg';
58
+ export { default as Folders } from '../../icons/icons/folders.svg';
59
+ export { default as HeartFilled } from '../../icons/icons/heart-filled.svg';
60
+ export { default as HeartOutlined } from '../../icons/icons/heart-outlined.svg';
61
+ export { default as HomeFilled } from '../../icons/icons/home-filled.svg';
62
+ export { default as HomeOutlined } from '../../icons/icons/home-outlined.svg';
63
+ export { default as InfoCircleFilled } from '../../icons/icons/info-circle-filled.svg';
64
+ export { default as InfoCircleOutlined } from '../../icons/icons/info-circle-outlined.svg';
65
+ export { default as Instagram } from '../../icons/icons/instagram.svg';
66
+ export { default as Link } from '../../icons/icons/link.svg';
67
+ export { default as LinkedinFilled } from '../../icons/icons/linkedin-filled.svg';
68
+ export { default as List } from '../../icons/icons/list.svg';
69
+ export { default as Loader } from '../../icons/icons/loader.svg';
70
+ export { default as MapPinFilled } from '../../icons/icons/map-pin-filled.svg';
71
+ export { default as MapPinOff } from '../../icons/icons/map-pin-off.svg';
72
+ export { default as MapPinOutlined } from '../../icons/icons/map-pin-outlined.svg';
73
+ export { default as Map } from '../../icons/icons/map.svg';
74
+ export { default as Maximize } from '../../icons/icons/maximize.svg';
75
+ export { default as Menu2 } from '../../icons/icons/menu2.svg';
76
+ export { default as MessageCircle2Filled } from '../../icons/icons/message-circle2-filled.svg';
77
+ export { default as MessageCircle2Outlined } from '../../icons/icons/message-circle2-outlined.svg';
78
+ export { default as MessengerFilled } from '../../icons/icons/messenger-filled.svg';
79
+ export { default as MessengerOutlined } from '../../icons/icons/messenger-outlined.svg';
80
+ export { default as Minus } from '../../icons/icons/minus.svg';
81
+ export { default as NavigationFilled } from '../../icons/icons/navigation-filled.svg';
82
+ export { default as NavigationOutlined } from '../../icons/icons/navigation-outlined.svg';
83
+ export { default as Package } from '../../icons/icons/package.svg';
84
+ export { default as PauseFilled } from '../../icons/icons/pause-filled.svg';
85
+ export { default as PdfReader } from '../../icons/icons/pdf-reader.svg';
86
+ export { default as Pencil } from '../../icons/icons/pencil.svg';
87
+ export { default as PhoneFilled } from '../../icons/icons/phone-filled.svg';
88
+ export { default as PhoneOutlined } from '../../icons/icons/phone-outlined.svg';
89
+ export { default as PhotoFilled } from '../../icons/icons/photo-filled.svg';
90
+ export { default as PhotoOutlined } from '../../icons/icons/photo-outlined.svg';
91
+ export { default as Photo } from '../../icons/icons/photo.svg';
92
+ export { default as PlayerPlayFilled } from '../../icons/icons/player-play-filled.svg';
93
+ export { default as PlayerPlayOutlined } from '../../icons/icons/player-play-outlined.svg';
94
+ export { default as Plus } from '../../icons/icons/plus.svg';
95
+ export { default as PointFilled } from '../../icons/icons/point-filled.svg';
96
+ export { default as PointOutlined } from '../../icons/icons/point-outlined.svg';
97
+ export { default as Refresh } from '../../icons/icons/refresh.svg';
98
+ export { default as Registered } from '../../icons/icons/registered.svg';
99
+ export { default as Repeat } from '../../icons/icons/repeat.svg';
100
+ export { default as Reset } from '../../icons/icons/reset.svg';
101
+ export { default as Scan } from '../../icons/icons/scan.svg';
102
+ export { default as Search } from '../../icons/icons/search.svg';
103
+ export { default as SettingsFilled } from '../../icons/icons/settings-filled.svg';
104
+ export { default as SettingsOutlined } from '../../icons/icons/settings-outlined.svg';
105
+ export { default as ShareOutlined } from '../../icons/icons/share-outlined.svg';
106
+ export { default as ShoppingBag } from '../../icons/icons/shopping-bag.svg';
107
+ export { default as ShoppingCart } from '../../icons/icons/shopping-cart.svg';
108
+ export { default as StarFilled } from '../../icons/icons/star-filled.svg';
109
+ export { default as StartOutlined } from '../../icons/icons/start-outlined.svg';
110
+ export { default as TiktokFilled } from '../../icons/icons/tiktok-filled.svg';
111
+ export { default as TiktokOutlined } from '../../icons/icons/tiktok-outlined.svg';
112
+ export { default as Tool } from '../../icons/icons/tool.svg';
113
+ export { default as TrashFilled } from '../../icons/icons/trash-filled.svg';
114
+ export { default as TrashOff } from '../../icons/icons/trash-off.svg';
115
+ export { default as TrashOutlined } from '../../icons/icons/trash-outlined.svg';
116
+ export { default as TrendingDown } from '../../icons/icons/trending-down.svg';
117
+ export { default as TrendingUp } from '../../icons/icons/trending-up.svg';
118
+ export { default as Upload } from '../../icons/icons/upload.svg';
119
+ export { default as UserFilled } from '../../icons/icons/user-filled.svg';
120
+ export { default as UserOutlined } from '../../icons/icons/user-outlined.svg';
121
+ export { default as UserPlus } from '../../icons/icons/user-plus.svg';
122
+ export { default as Video } from '../../icons/icons/video.svg';
123
+ export { default as Wechat } from '../../icons/icons/wechat.svg';
124
+ export { default as World } from '../../icons/icons/world.svg';
125
+ export { default as X } from '../../icons/icons/x.svg';
126
+ export { default as Xtwitter } from '../../icons/icons/xtwitter.svg';
127
+ export { default as Youtube } from '../../icons/icons/youtube.svg';
128
+ export { default as CalendarIconographic } from '../../icons/iconographics/calendar.svg';
129
+ export { default as CaloriesFoodPyramid } from '../../icons/iconographics/calories-food-pyramid.svg';
130
+ export { default as CashPaymentBill } from '../../icons/iconographics/cash-payment-bill.svg';
131
+ export { default as DiagramSteadyDown } from '../../icons/iconographics/diagram-steady-down.svg';
132
+ export { default as DonationCharityCarePerson } from '../../icons/iconographics/donation-charity-care-person.svg';
133
+ export { default as Expand } from '../../icons/iconographics/expand.svg';
134
+ export { default as HospitalShield } from '../../icons/iconographics/hospital-shield.svg';
135
+ export { default as InsuranceDocument } from '../../icons/iconographics/insurance-document.svg';
136
+ export { default as Lock } from '../../icons/iconographics/lock.svg';
137
+ export { default as LockerRoomHangerMan } from '../../icons/iconographics/locker-room-hanger-man.svg';
138
+ export { default as MedicalFile } from '../../icons/iconographics/medical-file.svg';
139
+ export { default as MedicalProfilePatient } from '../../icons/iconographics/medical-profile-patient.svg';
140
+ export { default as MedicalResourcesFolder } from '../../icons/iconographics/medical-resources-folder.svg';
141
+ export { default as MedicalSpecialtyRehabilitation } from '../../icons/iconographics/medical-specialty-rehabilitation.svg';
142
+ export { default as MultipleActionsStar } from '../../icons/iconographics/multiple-actions-star.svg';
143
+ export { default as MultipleCircle } from '../../icons/iconographics/multiple-circle.svg';
144
+ export { default as ShieldLock } from '../../icons/iconographics/shield-lock.svg';
145
+ export { default as SingleManActionsInformation } from '../../icons/iconographics/single-man-actions-information.svg';
146
+ export { default as SingleNeutralActionsChat } from '../../icons/iconographics/single-neutral-actions-chat.svg';