mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 14:19:17 +08:00
feat(many): default components to Phosphor Icons for ionic theme (#29617)
Issue number: internal
---------
## What is the current behavior?
Icons in the Ionic theme default to Ionicons.
## What is the new behavior?
- Renames the following config properties:
- `datetimeShowMonthYearIcon` to `datetimeExpandedIcon`
- `datetimeHideMonthYearIcon` to `datetimeCollapsedIcon`
- `selectExpandIcon` to `selectExpandedIcon`
- Updates the icons for the `ionic` theme to the following Phosphor
Icons:
| Component | Config | Phosphor Icon | Font Weight |
| ------------------------ | --------------------------- |
----------------- | ----------- |
| Accordion | `accordionToggleIcon` | `CaretDown` | `regular` |
| Back Button | `backButtonIcon` | `CaretLeft` | `regular` |
| Breadcrumb | `breadcrumbSeparatorIcon` | `CaretRight` | `regular` |
| Breadcrumb | `breadcrumbCollapsedIcon` | `DotsThree` | `regular` |
| Checkbox | N/A | `Check` | `bold` |
| Checkbox (indeterminate) | N/A | `Minus` | `bold` |
| Datetime | `datetimeNextIcon` | `CaretRight` | `regular` |
| Datetime | `datetimePreviousIcon` | `CaretLeft` | `regular` |
| Datetime | `datetimeCollapsedIcon` | `CaretDown` | `regular` |
| Datetime | `datetimeExpandedIcon` | `CaretUp` | `regular` |
| Fab Button | `fabButtonCloseIcon` | `X` | `regular` |
| Input | `inputClearIcon` | `X` | `regular` |
| Input Password Toggle | `inputPasswordShowIcon` | `Eye` | `regular` |
| Input Password Toggle | `inputPasswordHideIcon` | `EyeSlash` |
`regular` |
| Item | `itemDetailIcon` | `CaretRight` | `regular` |
| Menu Button | `menuIcon` | `List` | `regular` |
| Reorder | `reorderHandleIcon` | `List` | `regular` |
| Refresher | `refreshingIcon` | ❌ | |
| Refresher (arrow icon) | N/A | `CaretLeft` | `fill` |
| Searchbar | `searchbarCancelIcon` | `ArrowLeft` | `regular` |
| Searchbar | `searchbarClearIcon` | `X` | `regular` |
| Searchbar | `searchbarSearchIcon` | `MagnifyingGlass` | `regular` |
| Select | `selectExpandedIcon` | `CaretDown` | `regular` |
| Select | `selectCollapsedIcon` | `CaretDown` | `regular` |
| Toggle | `toggleCheckedIcon` | `LineVertical` | `regular` |
| Toggle | `toggleUncheckedIcon` | `Circle` | `regular` |
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
This commit is contained in:
@ -1,3 +1,4 @@
|
||||
import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
|
||||
import type { ComponentInterface, EventEmitter } from '@stencil/core';
|
||||
import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
|
||||
import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
|
||||
@ -153,8 +154,30 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
|
||||
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
||||
}
|
||||
|
||||
get fabButtonCloseIcon() {
|
||||
// Return the icon if it is explicitly set
|
||||
if (this.closeIcon != null) {
|
||||
return this.closeIcon;
|
||||
}
|
||||
|
||||
// Determine the theme and map to default icons
|
||||
const theme = getIonTheme(this);
|
||||
const defaultIcons = {
|
||||
ios: close,
|
||||
ionic: xRegular,
|
||||
md: close,
|
||||
};
|
||||
|
||||
// Get the default icon based on the theme, falling back to 'md' icon if necessary
|
||||
const defaultIcon = defaultIcons[theme] || defaultIcons.md;
|
||||
|
||||
// Return the configured fab button close icon or the default icon
|
||||
return config.get('fabButtonCloseIcon', defaultIcon);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
|
||||
const { el, disabled, fabButtonCloseIcon, color, href, activated, show, translucent, size, inheritedAttributes } =
|
||||
this;
|
||||
const inList = hostContext('ion-fab-list', el);
|
||||
const theme = getIonTheme(this);
|
||||
const TagType = href === undefined ? 'button' : ('a' as any);
|
||||
@ -167,7 +190,6 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
|
||||
rel: this.rel,
|
||||
target: this.target,
|
||||
};
|
||||
const fabButtonCloseIcon = this.closeIcon ?? config.get('fabButtonCloseIcon', close);
|
||||
|
||||
return (
|
||||
<Host
|
||||
|
||||
Reference in New Issue
Block a user