@launchpad-ui/icons - npm Package Compare versions

Comparing version 0.9.0-alpha.0 to 0.9.0

dist/FlairIcon.d.ts

 import type { IconProps } from './Icon';
-import type { HTMLProps, ReactElement } from 'react';
-type FlairIconProps = Omit<HTMLProps<HTMLDivElement>, 'className'> & {
+import type { ComponentProps, ReactElement } from 'react';
+type FlairIconProps = Omit<ComponentProps<'div'>, 'className'> & {
     'data-test-id'?: string;
@@ -9,5 +9,5 @@ gradient?: 'purpleToBlue' | 'yellowToCyan' | 'pinkToPurple' | 'cyanToBlue' | 'cyanToPurple';
 };
-declare const FlairIcon: ({ children, "data-test-id": testId, isRounded, gradient, ...props }: FlairIconProps) => JSX.Element;
+declare const FlairIcon: ({ children, "data-test-id": testId, isRounded, gradient, ...props }: FlairIconProps) => import("react/jsx-runtime").JSX.Element;
 export { FlairIcon };
 export type { FlairIconProps };
 //# sourceMappingURL=FlairIcon.d.ts.map

dist/Icon.d.ts

@@ -1,11 +0,14 @@
-import type { HTMLProps } from 'react';
-type IconProps = Omit<HTMLProps<HTMLSpanElement>, 'size'> & {
-    name?: string;
+import type { IconName } from './types';
+import type { ComponentProps } from 'react';
+type IconProps = ComponentProps<'svg'> & {
+    name: IconName;
     subtle?: boolean;
     size?: 'micro' | 'tiny' | 'small' | 'medium' | 'mlarge' | 'large' | 'xlarge' | 'huge';
     'data-test-id'?: string;
+    title?: string;
+    description?: string;
 };
-declare const Icon: ({ name, subtle, className, size, children, "data-test-id": testId, ...props }: IconProps) => JSX.Element;
+declare const Icon: ({ name, subtle, className, size, children, "data-test-id": testId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-hidden": ariaHidden, title, description, focusable, role, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export { Icon };
 export type { IconProps };
 //# sourceMappingURL=Icon.d.ts.map

dist/index.d.ts

@@ -1,129 +0,10 @@
-export { AccountClockOutline } from './AccountClockOutline';
-export { Add } from './Add';
-export { AlertRhombus } from './AlertRhombus';
-export { ApprovalApplied } from './ApprovalApplied';
-export { ApprovalDenied } from './ApprovalDenied';
-export { Approval } from './Approval';
-export { AreaChart } from './AreaChart';
-export { ArrowDownThin } from './ArrowDownThin';
-export { ArrowDropDown } from './ArrowDropDown';
-export { ArrowLeftThin } from './ArrowLeftThin';
-export { ArrowRightThin } from './ArrowRightThin';
-export { ArrowRight } from './ArrowRight';
-export { ArrowUpThin } from './ArrowUpThin';
-export { Article } from './Article';
-export { BorderAll } from './BorderAll';
-export { Bullhorn } from './Bullhorn';
-export { BullseyeArrow } from './BullseyeArrow';
-export { Bullseye } from './Bullseye';
-export { CalendarToday } from './CalendarToday';
-export { Cancel } from './Cancel';
-export { ChangeHistory } from './ChangeHistory';
-export { ChatBubbleCircle } from './ChatBubbleCircle';
-export { CheckCircleOutline } from './CheckCircleOutline';
-export { CheckCircle } from './CheckCircle';
-export { Check } from './Check';
-export { ChevronLeft } from './ChevronLeft';
-export { ChevronRight } from './ChevronRight';
-export { CircleDashed } from './CircleDashed';
-export { CircleOutline } from './CircleOutline';
-export { Circle } from './Circle';
-export { ClickMetric } from './ClickMetric';
-export { ClipboardCopy } from './ClipboardCopy';
-export { Clipboard } from './Clipboard';
-export { ClockAlertOutline } from './ClockAlertOutline';
-export { Close } from './Close';
-export { Connection } from './Connection';
-export { ContactPage } from './ContactPage';
-export { ContentCopy } from './ContentCopy';
-export { CreditCard } from './CreditCard';
-export { CustomMetric } from './CustomMetric';
-export { DarkMode } from './DarkMode';
-export { Delete } from './Delete';
-export { Download } from './Download';
-export { Edit } from './Edit';
-export { EqualCircle } from './EqualCircle';
-export { ErrorCircle } from './ErrorCircle';
-export { EventBusy } from './EventBusy';
-export { ExpandLess } from './ExpandLess';
-export { ExpandMore } from './ExpandMore';
-export { Extension } from './Extension';
-export { FileDocumentEditCircle } from './FileDocumentEditCircle';
-export { FilterAlt } from './FilterAlt';
-export { FilterTune } from './FilterTune';
-export { FlagCircle } from './FlagCircle';
-export { Flag } from './Flag';
-export { Forward } from './Forward';
-export { Grid3X3 } from './Grid3X3';
-export { Group } from './Group';
-export { HalfCircle } from './HalfCircle';
-export { HamburgerMenu } from './HamburgerMenu';
-export { Help } from './Help';
-export { HorizontalRule } from './HorizontalRule';
-export { Inbox } from './Inbox';
-export { Info } from './Info';
-export { KeyboardDoubleArrowLeft } from './KeyboardDoubleArrowLeft';
-export { KeyboardDoubleArrowRight } from './KeyboardDoubleArrowRight';
-export { Language } from './Language';
-export { LightMode } from './LightMode';
-export { Link } from './Link';
-export { Lock } from './Lock';
-export { MinusCircle } from './MinusCircle';
-export { MoreHoriz } from './MoreHoriz';
-export { MoreVert } from './MoreVert';
-export { Notifications } from './Notifications';
-export { OpenInNew } from './OpenInNew';
-export { Pause } from './Pause';
-export { PersonAdd } from './PersonAdd';
-export { PersonOff } from './PersonOff';
-export { PersonRemoveAlt } from './PersonRemoveAlt';
-export { Person } from './Person';
-export { PieChart } from './PieChart';
-export { PlayArrow } from './PlayArrow';
-export { PlayCircle } from './PlayCircle';
-export { PlusCircleFill } from './PlusCircleFill';
-export { PlusCircleOutline } from './PlusCircleOutline';
-export { Power } from './Power';
-export { Preview } from './Preview';
-export { ProgressCheck } from './ProgressCheck';
-export { PulseActive } from './PulseActive';
-export { QuickStart } from './QuickStart';
-export { RadioButtonChecked } from './RadioButtonChecked';
-export { ReleasePath } from './ReleasePath';
-export { Remove } from './Remove';
-export { Robot } from './Robot';
-export { Schedule } from './Schedule';
-export { Search } from './Search';
-export { ShieldAccount } from './ShieldAccount';
-export { ShieldKey } from './ShieldKey';
-export { StarOutline } from './StarOutline';
-export { Star } from './Star';
-export { Stars } from './Stars';
-export { StatusActive } from './StatusActive';
-export { StatusInactive } from './StatusInactive';
-export { StatusLaunched } from './StatusLaunched';
-export { StatusNew } from './StatusNew';
-export { StepInProgressOutline } from './StepInProgressOutline';
-export { StepInProgress } from './StepInProgress';
-export { Stop } from './Stop';
-export { SupportAgent } from './SupportAgent';
-export { SwapHoriz } from './SwapHoriz';
-export { SwapVertical } from './SwapVertical';
-export { TemplatesCircle } from './TemplatesCircle';
-export { ThumbUp } from './ThumbUp';
-export { Toggles } from './Toggles';
-export { TrendingUpCircle } from './TrendingUpCircle';
-export { Undo } from './Undo';
-export { UnfoldLess } from './UnfoldLess';
-export { UnfoldMore } from './UnfoldMore';
-export { Verified } from './Verified';
-export { ViewList } from './ViewList';
-export { VisibilityOff } from './VisibilityOff';
-export { Visibility } from './Visibility';
-export { Warning } from './Warning';
-export { WorkflowBuilder } from './WorkflowBuilder';
 export type { IconProps } from './Icon';
+export type { IconContextState } from './context';
+export type { FlairIconProps } from './FlairIcon';
+export type { StatusIconProps } from './StatusIcon';
+export type { IconName } from './types';
 export { Icon } from './Icon';
+export { IconContext } from './context';
 export { FlairIcon } from './FlairIcon';
 export { StatusIcon } from './StatusIcon';
 //# sourceMappingURL=index.d.ts.map

dist/StatusIcon.d.ts

@@ -1,9 +0,8 @@
-/// <reference types="react" />
 import type { IconProps } from './Icon';
-type StatusIconProps = IconProps & {
+type StatusIconProps = Omit<IconProps, 'name'> & {
     kind: 'info' | 'success' | 'warning' | 'error';
 };
-declare const StatusIcon: ({ kind, size, ...rest }: StatusIconProps) => JSX.Element;
+declare const StatusIcon: ({ kind, size, ...rest }: StatusIconProps) => import("react/jsx-runtime").JSX.Element;
 export { StatusIcon };
 export type { StatusIconProps };
 //# sourceMappingURL=StatusIcon.d.ts.map

package.json

 {
   "name": "@launchpad-ui/icons",
-  "version": "0.9.0-alpha.0",
+  "version": "0.9.0",
   "status": "beta",
@@ -25,3 +25,4 @@ "publishConfig": {
     "./package.json": "./package.json",
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./sprite.svg": "./dist/sprite.svg"
   },
@@ -31,3 +32,3 @@ "source": "src/index.ts",
     "classix": "2.1.17",
-    "@launchpad-ui/tokens": "~0.5.3"
+    "@launchpad-ui/tokens": "~0.6.0"
   },
@@ -39,3 +40,2 @@ "peerDependencies": {
   "devDependencies": {
-    "@svgr/cli": "^6.5.0",
     "react": "18.2.0",
@@ -45,8 +45,7 @@ "react-dom": "18.2.0"
   "scripts": {
-    "build": "pnpm build:icons && vite build -c ../../vite.config.ts && tsc --project tsconfig.build.json",
-    "build:icons": "svgr --silent -- icons",
+    "build": "vite build -c ../../vite.config.ts && tsc --project tsconfig.build.json && cp src/img/sprite.svg dist",
     "clean": "rm -rf dist",
     "lint": "eslint '**/*.{ts,tsx,js}' && stylelint '**/*.css' --ignore-path ../../.stylelintignore",
-    "test": "pnpm build:icons && vitest run --coverage"
+    "test": "vitest run --coverage"
   }
 }

README.md

@@ -18,17 +18,29 @@ # @launchpad-ui/icons
 
+### Basic
+
+By default, the `Icon` component expects the package's provided `sprite.svg` file to be located in `/static/sprite.svg` of your app. The `name` prop specifies which icon to render.
+
 ```js
-import { Add } from '@launchpad-ui/icons';
+import { Icon } from '@launchpad-ui/icons';
+
+const MyIcon = () => <Icon name="info" />;
 ```
 
-## Contributing
-To add an icon to our library, drop the SVG inside of `/icons` and run one of the below scripts to generate the component for it. It's intended that consumers will utilize the icon components rather than the raw SVGs.
+### Custom static location
 
-From the root of launchpad-ui (preferred):
+A custom path to the sprite can be set via the `IconContext` provider. For example, if importing a static asset returns a resolved URL ([like in Vite](https://vitejs.dev/guide/assets.html#importing-asset-as-url) or [Remix](https://remix.run/docs/en/1.18.1/other-api/asset-imports#asset-url-imports)) you can do the following in your app to load the icons:
+
 ```js
-pnpm build:transform
+import { IconContext } from '@launchpad-ui/icons';
+import icons from '@launchpad-ui/icons/sprite.svg';
+import { createRoot } from 'react-dom/client';
+
+const domNode = document.getElementById('root');
+const root = createRoot(domNode);
+
+root.render(
+  <IconContext.Provider value={{ path: icons }}>
+    <App />
+  </IconContext.Provider>
+);
 ```
-
-OR, from within the root of the icons package:
-```js
-pnpm build
-```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

2

decreased by-33.33%

Number of lines in readme file

46

increased by39.39%

Number of low supply chain risk alerts

1

decreased by-66.67%

Worsened metrics

Total package byte prevSize

76893

decreased by-88.2%

Number of package files

21

decreased by-92.05%

Lines of code

398

decreased by-94.59%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@launchpad-ui/tokens@0.6.0(transitive)

• - Removed@launchpad-ui/tokens@0.5.8(transitive)

• Updated@launchpad-ui/tokens@~0.6.0