mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor: use icons from carbon-icons-svelte@11 (#1227)

Browse source 
* chore: update ignore rules, remove unused files

* refactor(icons): use icons from carbon-icons-svelte@11

* docs(time-picker): fix default value

* chore: upgrade carbon-icons-svelte to v11

* docs: update examples to use icons from carbon-icons-svelte@11

* docs: update number of icons [ci skip]
This commit is contained in:
metonym 2022-04-03 11:57:28 -07:00 • committed by GitHub
commit ba58ba8f00
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
176 changed files with 1410 additions and 2487 deletions
Download patch file Download diff file Expand all files Collapse all files

8
.gitignore vendored
View file

@ -1,9 +1,5 @@
/coverage
/lib
/node_modules
lib
node_modules
.DS_Store
yarn-debug.log*
yarn-error.log*
*.tgz
.vscode
.idea

12
.prettierignore
View file

@ -1,9 +1,9 @@
/coverage
/lib
/css
/**/__sapper__
/**/.routify
/**/dist
/**/client
/**/build
__sapper__
.svelte-kit
.routify
dist
client
build
*.svx

0
CODEOWNERS
View file

122
COMPONENT_INDEX.md
View file

@ -1564,8 +1564,8 @@ None.
| platformName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., &lt;span slot="platform"&gt;...&lt;/span&gt;) |
| persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| expansionBreakpoint | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |
| iconMenu | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the closed state<br />Defaults to `Menu20` |
| iconClose | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the opened state<br />Defaults to `Close20` |
| iconMenu | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to `&lt;Menu size={20} /&gt;` |
| iconClose | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the opened state.<br />Defaults to `&lt;Close size={20} /&gt;` |
### Slots
@ -1589,19 +1589,19 @@ None.
| :--------- | :--------------- | :------- | :---------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
| closeIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is open |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is closed.<br />Defaults to `&lt;Switcher size={20} /&gt;` |
| closeIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is open.<br />Defaults to `&lt;Close size={20} /&gt;` |
| text | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
| transition | <code>let</code> | No | <code>false &#124; import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :---------------------------------------------------------- |
| -- | Yes | -- | -- |
| closeIcon | No | -- | <code>&lt;svelte:component this="{closeIcon}" /&gt;</code> |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
| text | No | -- | <code>{#if text}&lt;span&gt;{text}&lt;/span&gt;{/if}</code> |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :--------------------------------------------------------------------- |
| -- | Yes | -- | -- |
| closeIcon | No | -- | <code>&lt;svelte:component this="{closeIcon}" size="{20}" /&gt;</code> |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" size="{20}" /&gt;</code> |
| text | No | -- | <code>{#if text}&lt;span&gt;{text}&lt;/span&gt;{/if}</code> |
### Events
@ -1623,9 +1623,9 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :---------------------------------------------------- |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :---------------------------------------------------------------- |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" size="{20}" /&gt;</code> |
### Events
@ -2568,20 +2568,20 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
| menuRef | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
| buttonRef | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
| icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
| size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu |
| direction | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| flipped | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
| menuOptionsClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the menu options class |
| iconClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the icon class |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
| menuRef | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
| buttonRef | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
| icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;OverflowMenuVertical /&gt;` |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
| size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu |
| direction | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| flipped | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
| menuOptionsClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the menu options class |
| iconClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the icon class |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
### Slots
@ -3055,24 +3055,24 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| value | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
| searchClass | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
| expandable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
| placeholder | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
| autocomplete | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
| autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
| closeButtonLabelText | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| value | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
| searchClass | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
| expandable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
| placeholder | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
| autocomplete | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
| autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
| closeButtonLabelText | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;Search /&gt;` |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
### Slots
@ -4490,22 +4490,22 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
| refIcon | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
| refTooltip | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
| align | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
| direction | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
| hideIcon | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the tooltip button<br />Icon size must be 16px (e.g., `Add16`, `Task16`) |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
| iconName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
| tooltipId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip |
| triggerId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button |
| triggerText | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| refIcon | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
| refTooltip | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
| align | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
| direction | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
| hideIcon | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to `&lt;Information /&gt;` |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
| iconName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
| tooltipId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip |
| triggerId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button |
| triggerText | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text |
### Slots

1
MAINTAINERS.md
View file

@ -1 +0,0 @@
# Maintainers

6
README.md
View file

@ -10,7 +10,7 @@ Design systems facilitate design and development through reuse, consistency, and
The Carbon Svelte portfolio also includes:
- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 7000+ Carbon icons as Svelte components
- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 1900+ Carbon icons as Svelte components
- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
- **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
@ -219,8 +219,8 @@ The preprocessor optimizes imports from the following packages:
- import { Add16 } from "carbon-icons-svelte";
- import { Airplane } from "carbon-pictograms-svelte";
+ import Button from "carbon-components-svelte/src/Button/Button.svelte";
+ import Add16 from "carbon-icons-svelte/lib/Add16/Add16.svelte";
+ import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte";
+ import Add16 from "carbon-icons-svelte/lib/Add16.svelte";
+ import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
```
#### Usage

2
docs/package.json
View file

@ -12,7 +12,7 @@
"@sveltech/routify": "^1.9.10",
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.40",
"carbon-components-svelte": "../",
"carbon-icons-svelte": "^10.45.1",
"carbon-icons-svelte": "^11.0.1",
"clipboard-copy": "^4.0.1",
"cross-env": "^7.0.3",
"mdsvex": "^0.9.8",

24
docs/src/COMPONENT_API.json
View file

@ -4053,8 +4053,8 @@
"moduleExports": [],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "Close16" },
{ "type": "forwarded", "name": "keydown", "element": "Close16" }
{ "type": "forwarded", "name": "click", "element": "Close" },
{ "type": "forwarded", "name": "keydown", "element": "Close" }
],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "Loading" }
@ -4437,7 +4437,7 @@
{
"name": "iconMenu",
"kind": "let",
"description": "Specify the icon to render for the closed state\nDefaults to `Menu20`",
"description": "Specify the icon to render for the closed state.\nDefaults to `<Menu size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4447,7 +4447,7 @@
{
"name": "iconClose",
"kind": "let",
"description": "Specify the icon to render for the opened state\nDefaults to `Close20`",
"description": "Specify the icon to render for the opened state.\nDefaults to `<Close size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4488,7 +4488,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon to render",
"description": "Specify the icon to render when the action panel is closed.\nDefaults to `<Switcher size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4498,7 +4498,7 @@
{
"name": "closeIcon",
"kind": "let",
"description": "Specify the icon to render when the action panel is open",
"description": "Specify the icon to render when the action panel is open.\nDefaults to `<Close size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4544,13 +4544,13 @@
{
"name": "closeIcon",
"default": false,
"fallback": "<svelte:component this=\"{closeIcon}\" />",
"fallback": "<svelte:component this=\"{closeIcon}\" size=\"{20}\" />",
"slot_props": "{}"
},
{
"name": "icon",
"default": false,
"fallback": "<svelte:component this=\"{icon}\" />",
"fallback": "<svelte:component this=\"{icon}\" size=\"{20}\" />",
"slot_props": "{}"
},
{
@ -4619,7 +4619,7 @@
{
"name": "icon",
"default": false,
"fallback": "<svelte:component this=\"{icon}\" />",
"fallback": "<svelte:component this=\"{icon}\" size=\"{20}\" />",
"slot_props": "{}"
}
],
@ -7371,7 +7371,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon to render",
"description": "Specify the icon to render.\nDefaults to `<OverflowMenuVertical />`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -9183,7 +9183,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon to render",
"description": "Specify the icon to render.\nDefaults to `<Search />`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -12860,7 +12860,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon to render for the tooltip button\nIcon size must be 16px (e.g., `Add16`, `Task16`)",
"description": "Specify the icon to render for the tooltip button.\nDefault to `<Information />`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,

4
docs/src/components/Preview.svelte
View file

@ -6,7 +6,7 @@
import copy from "clipboard-copy";
import { CodeSnippet, Button } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
import { url } from "@sveltech/routify";
import { theme } from "../store";
@ -27,7 +27,7 @@
target="_blank"
size="field"
href="{themedSrcUrl}"
icon="{Launch16}"
icon="{Launch}"
>
Open in new tab
</Button>

9
docs/src/components/TileCard.svelte
View file

@ -6,8 +6,8 @@
export let borderBottom = false;
import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte";
import LogoGithub32 from "carbon-icons-svelte/lib/LogoGithub32";
import Launch20 from "carbon-icons-svelte/lib/Launch20";
import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
$: tileComponent = href ? ClickableTile : Tile;
</script>
@ -29,10 +29,11 @@
</div>
<div class="card-footer">
<svelte:component
this="{LogoGithub32}"
this="{LogoGithub}"
size="{32}"
style="fill: var(--cds-icon-01)"
/>
<Launch20 style="fill: var(--cds-icon-01)" />
<Launch size="{20}" style="fill: var(--cds-icon-01)" />
</div>
</div>
</svelte:component>

4
docs/src/layouts/ComponentLayout.svelte
View file

@ -13,7 +13,7 @@
Tab,
TabContent,
} from "carbon-components-svelte";
import Code16 from "carbon-icons-svelte/lib/Code16";
import Code from "carbon-icons-svelte/lib/Code.svelte";
import { page, metatags } from "@sveltech/routify";
import { onMount } from "svelte";
import { theme } from "../store";
@ -71,7 +71,7 @@
target="_blank"
size="field"
href="{sourceCode}"
icon="{Code16}"
icon="{Code}"
>
Source code
</Button>

4
docs/src/pages/_layout.svelte
View file

@ -15,7 +15,7 @@
SideNavMenuItem,
Tag,
} from "carbon-components-svelte";
import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20";
import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
import Theme from "../components/Theme.svelte";
const deprecated = [];
@ -58,7 +58,7 @@
<HeaderUtilities>
<HeaderActionLink
icon="{LogoGithub20}"
icon="{LogoGithub}"
href="https://github.com/carbon-design-system/carbon-components-svelte"
target="_blank"
/>

22
docs/src/pages/components/Button.svx
View file

@ -1,11 +1,11 @@
<script>
import { InlineNotification, Button } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
import Login16 from "carbon-icons-svelte/lib/Login16";
import Add from "carbon-icons-svelte/lib/Add.svelte";
import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";
import Login from "carbon-icons-svelte/lib/Login.svelte";
import Preview from "../../components/Preview.svelte";
let index = 1;
@ -43,7 +43,7 @@
</div>
</InlineNotification>
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan16} />
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} />
### Danger ghost button
@ -51,7 +51,7 @@
### Button with icon
<Button icon={Add16}>With icon</Button>
<Button icon={Add}>With icon</Button>
### Icon-only button
@ -61,17 +61,17 @@
</div>
</InlineNotification>
<Button iconDescription="Tooltip text" icon={Add16} />
<Button iconDescription="Tooltip text" icon={Add} />
### Icon-only, link button
<Button iconDescription="Login" icon={Login16} href="#" />
<Button iconDescription="Login" icon={Login} href="#" />
### Icon-only button (custom tooltip position)
The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add16} />
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add} />
### Selected icon-only, ghost button

4
docs/src/pages/components/ButtonSet.svx
View file

@ -4,7 +4,7 @@ source: Button/ButtonSet.svelte
<script>
import { Button, ButtonSet } from "carbon-components-svelte";
import Login16 from "carbon-icons-svelte/lib/Login16";
import Login from "carbon-icons-svelte/lib/Login.svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -22,6 +22,6 @@ Buttons in a button set are juxtaposed by default.
Set `stacked` to `true` to use the stacked variant.
<ButtonSet stacked>
<Button icon={Login16}>Log in</Button>
<Button icon={Login}>Log in</Button>
<Button kind="ghost">Sign up</Button>
</ButtonSet>

8
docs/src/pages/components/ContentSwitcher.svx
View file

@ -4,8 +4,8 @@ components: ["ContentSwitcher", "Switch"]
<script>
import { ContentSwitcher, Switch } from "carbon-components-svelte";
import Bullhorn16 from "carbon-icons-svelte/lib/Bullhorn16";
import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
import Bullhorn from "carbon-icons-svelte/lib/Bullhorn.svelte";
import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -33,12 +33,12 @@ components: ["ContentSwitcher", "Switch"]
<ContentSwitcher>
<Switch>
<div style="display: flex; align-items: center;">
<Bullhorn16 style="margin-right: 0.5rem;" /> Latest news
<Bullhorn style="margin-right: 0.5rem;" /> Latest news
</div>
</Switch>
<Switch>
<div style="display: flex; align-items: center;">
<Analytics16 style="margin-right: 0.5rem;" /> Trending
<Analytics style="margin-right: 0.5rem;" /> Trending
</div>
</Switch>
</ContentSwitcher>

4
docs/src/pages/components/DataTable.svx
View file

@ -4,7 +4,7 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
<script>
import { InlineNotification, DataTable, DataTableSkeleton, Pagination, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
import Preview from "../../components/Preview.svelte";
const pagination = { pageSize: 5, page: 1}
@ -146,7 +146,7 @@ The slot name for the table header cells is `"cell-header"`.
</svelte:fragment>
<svelte:fragment slot="cell" let:row let:cell>
{#if cell.key === 'rule' && cell.value === 'Round robin'}
<Link icon={Launch16} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
<Link icon={Launch} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
{:else}
{cell.value}
{/if}

4
docs/src/pages/components/Link.svx
View file

@ -4,7 +4,7 @@ components: ["Link", "OutboundLink"]
<script>
import { Link, OutboundLink } from "carbon-components-svelte";
import Carbon16 from "carbon-icons-svelte/lib/Carbon16"
import Carbon from "carbon-icons-svelte/lib/Carbon.svelte"
import Preview from "../../components/Preview.svelte";
</script>
@ -39,7 +39,7 @@ Note that `inline` must be `false` when rendering a link with an icon.
<div>
Visit the
<Link href="https://www.carbondesignsystem.com/" icon={Carbon16}>Carbon Design System</Link>.
<Link href="https://www.carbondesignsystem.com/" icon={Carbon}>Carbon Design System</Link>.
</div>
### Large size

4
docs/src/pages/components/OverflowMenu.svx
View file

@ -4,7 +4,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
<script>
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import Add from "carbon-icons-svelte/lib/Add.svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -68,7 +68,7 @@ By default, the first overflow menu item is focused when opening the dropdown.
### Custom trigger icon
<OverflowMenu icon={Add16}>
<OverflowMenu icon={Add}>
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
<OverflowMenuItem danger text="Delete service" />

2
docs/src/pages/components/Search.svx
View file

@ -1,5 +1,5 @@
<script>
import Query16 from "carbon-icons-svelte/lib/Query16";
import Query from "carbon-icons-svelte/lib/Query.svelte";
import { Search } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>

2
docs/src/pages/components/StructuredList.svx
View file

@ -4,7 +4,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
<script>
import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
import Preview from "../../components/Preview.svelte";
</script>

4
docs/src/pages/components/Tag.svx
View file

@ -1,6 +1,6 @@
<script>
import { Tag } from "carbon-components-svelte";
import IbmCloud16 from "carbon-icons-svelte/lib/IbmCloud16";
import IbmCloud from "carbon-icons-svelte/lib/IbmCloud.svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -43,7 +43,7 @@
Note: rendering a custom icon cannnot be used with the filterable variant.
<Tag icon={IbmCloud16}>IBM Cloud</Tag>
<Tag icon={IbmCloud}>IBM Cloud</Tag>
### Interactive variant

24
docs/src/pages/components/TimePicker.svx
View file

@ -10,11 +10,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Default
<TimePicker labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<TimePickerSelect value="pm">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
@ -23,11 +23,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Light variant
<TimePicker light labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<TimePickerSelect value="pm">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
@ -36,11 +36,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Extra-large size
<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<TimePickerSelect value="pm">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
@ -49,11 +49,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Small size
<TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<TimePickerSelect value="pm">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
@ -62,11 +62,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Invalid state
<TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<TimePickerSelect value="pm">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
@ -76,11 +76,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Disabled state
<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
<TimePickerSelect value="PM" disabled>
<TimePickerSelect value="pm" disabled>
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT" disabled>
<TimePickerSelect value="pdt" disabled>
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>

4
docs/src/pages/components/Tooltip.svx
View file

@ -4,7 +4,7 @@ components: ["Tooltip", "TooltipFooter"]
<script>
import { Tooltip, TooltipFooter, Link, Button } from "carbon-components-svelte";
import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
import Catalog from "carbon-icons-svelte/lib/Catalog.svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -57,7 +57,7 @@ By default, the tooltip is triggered by an information icon.
### Custom icon (component)
<Tooltip triggerText="Resource list" icon={Catalog16}>
<Tooltip triggerText="Resource list" icon={Catalog}>
<p>
Resources are provisioned based on your account's organization.
</p>

18
docs/src/pages/components/TooltipIcon.svx
View file

@ -1,29 +1,29 @@
<script>
import { TooltipIcon } from "carbon-components-svelte";
import Carbon24 from "carbon-icons-svelte/lib/Carbon24";
import Filter20 from "carbon-icons-svelte/lib/Filter20";
import Carbon from "carbon-icons-svelte/lib/Carbon.svelte";
import Filter from "carbon-icons-svelte/lib/Filter.svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default ("bottom" direction, "center" aligned)
<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />
<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
### Directions
<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter20} />
<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter20} />
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter20} />
<TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter20} />
<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter} />
<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter} />
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter} />
<TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter} />
### Custom tooltip text
Use the "text" slot to customize the tooltip text.
<TooltipIcon icon={Carbon24}>
<TooltipIcon icon={Carbon}>
<span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
</TooltipIcon>
### Disabled
<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />
<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />

12
docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
View file

@ -1,8 +1,8 @@
<script>
import { Button } from "carbon-components-svelte";
import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";
let index = 1;
</script>
@ -11,20 +11,20 @@
isSelected="{index === 0}"
kind="ghost"
iconDescription="Bold"
icon="{TextBold16}"
icon="{TextBold}"
on:click="{() => (index = 0)}"
/>
<Button
isSelected="{index === 1}"
kind="ghost"
iconDescription="Italicize"
icon="{TextItalic16}"
icon="{TextItalic}"
on:click="{() => (index = 1)}"
/>
<Button
isSelected="{index === 2}"
kind="ghost"
iconDescription="Underline"
icon="{TextUnderline16}"
icon="{TextUnderline}"
on:click="{() => (index = 2)}"
/>

13
docs/src/pages/framed/ContextMenu/ContextMenu.svelte
View file

@ -5,8 +5,8 @@
ContextMenuGroup,
ContextMenuOption,
} from "carbon-components-svelte";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
import Cut16 from "carbon-icons-svelte/lib/Cut16";
import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
import Cut from "carbon-icons-svelte/lib/Cut.svelte";
let selectedIds = [];
@ -18,14 +18,9 @@
indented
labelText="Copy"
shortcutText="⌘C"
icon="{CopyFile16}"
/>
<ContextMenuOption
indented
labelText="Cut"
shortcutText="⌘X"
icon="{Cut16}"
icon="{CopyFile}"
/>
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
<ContextMenuDivider />
<ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options" bind:selectedIds>

13
docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
View file

@ -5,8 +5,8 @@
ContextMenuGroup,
ContextMenuOption,
} from "carbon-components-svelte";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
import Cut16 from "carbon-icons-svelte/lib/Cut16";
import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
import Cut from "carbon-icons-svelte/lib/Cut.svelte";
let target;
</script>
@ -16,14 +16,9 @@
indented
labelText="Copy"
shortcutText="⌘C"
icon="{CopyFile16}"
/>
<ContextMenuOption
indented
labelText="Cut"
shortcutText="⌘X"
icon="{Cut16}"
icon="{CopyFile}"
/>
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
<ContextMenuDivider />
<ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options">

13
docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
View file

@ -5,8 +5,8 @@
ContextMenuGroup,
ContextMenuOption,
} from "carbon-components-svelte";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
import Cut16 from "carbon-icons-svelte/lib/Cut16";
import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
import Cut from "carbon-icons-svelte/lib/Cut.svelte";
let target;
let target2;
@ -20,14 +20,9 @@
indented
labelText="Copy"
shortcutText="⌘C"
icon="{CopyFile16}"
/>
<ContextMenuOption
indented
labelText="Cut"
shortcutText="⌘X"
icon="{Cut16}"
icon="{CopyFile}"
/>
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
<ContextMenuDivider />
<ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options">

4
docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte
View file

@ -9,7 +9,7 @@
ToolbarBatchActions,
Button,
} from "carbon-components-svelte";
import Save16 from "carbon-icons-svelte/lib/Save16";
import Save from "carbon-icons-svelte/lib/Save.svelte";
const headers = [
{ key: "name", value: "Name" },
@ -34,7 +34,7 @@
<DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
<Toolbar>
<ToolbarBatchActions>
<Button icon="{Save16}">Save</Button>
<Button icon="{Save}">Save</Button>
</ToolbarBatchActions>
<ToolbarContent>
<ToolbarSearch />

4
docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
View file

@ -1,13 +1,13 @@
<script>
import { Modal } from "carbon-components-svelte";
import Send16 from "carbon-icons-svelte/lib/Send16";
import Send from "carbon-icons-svelte/lib/Send.svelte";
</script>
<Modal
open
modalHeading="Invite someone"
primaryButtonText="Send invitation"
primaryButtonIcon="{Send16}"
primaryButtonIcon="{Send}"
secondaryButtonText="Cancel"
>
<p>Do you really want to invite someone?</p>

44
docs/src/pages/framed/TreeView/TreeViewIcons.svelte
View file

@ -1,76 +1,74 @@
<script>
import { TreeView } from "carbon-components-svelte";
import WatsonMachineLearning16 from "carbon-icons-svelte/lib/WatsonMachineLearning16";
import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
import Blockchain16 from "carbon-icons-svelte/lib/Blockchain16";
import DataBase16 from "carbon-icons-svelte/lib/DataBase16";
import SignalStrength16 from "carbon-icons-svelte/lib/SignalStrength16";
import WatsonMachineLearning from "carbon-icons-svelte/lib/WatsonMachineLearning.svelte";
import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
import Blockchain from "carbon-icons-svelte/lib/Blockchain.svelte";
import DataBase from "carbon-icons-svelte/lib/DataBase.svelte";
import SignalStrength from "carbon-icons-svelte/lib/SignalStrength.svelte";
let activeId = 1;
let selectedIds = [];
let children = [
{ id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning16 },
{ id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning },
{
id: 1,
text: "Analytics",
icon: Analytics16,
icon: Analytics,
expanded: true,
children: [
{
id: 2,
text: "IBM Analytics Engine",
icon: Analytics16,
icon: Analytics,
expanded: true,
children: [
{ id: 3, text: "Apache Spark", icon: Analytics16 },
{ id: 4, text: "Hadoop", icon: Analytics16 },
{ id: 3, text: "Apache Spark", icon: Analytics },
{ id: 4, text: "Hadoop", icon: Analytics },
],
},
{ id: 5, text: "IBM Cloud SQL Query", icon: Analytics16 },
{ id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics16 },
{ id: 5, text: "IBM Cloud SQL Query", icon: Analytics },
{ id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics },
],
},
{
id: 7,
text: "Blockchain",
icon: Blockchain16,
children: [
{ id: 8, text: "IBM Blockchain Platform", icon: Blockchain16 },
],
icon: Blockchain,
children: [{ id: 8, text: "IBM Blockchain Platform", icon: Blockchain }],
},
{
id: 9,
text: "Databases",
icon: DataBase16,
icon: DataBase,
children: [
{
id: 10,
text: "IBM Cloud Databases for Elasticsearch",
icon: DataBase16,
icon: DataBase,
},
{
id: 11,
text: "IBM Cloud Databases for Enterprise DB",
icon: DataBase16,
icon: DataBase,
},
{ id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase16 },
{ id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase },
{
id: 13,
text: "IBM Cloud Databases for PostgreSQL",
icon: DataBase16,
icon: DataBase,
},
],
},
{
id: 14,
text: "Integration",
icon: SignalStrength16,
icon: SignalStrength,
disabled: true,
children: [
{
id: 15,
text: "IBM API Connect",
icon: SignalStrength16,
icon: SignalStrength,
disabled: true,
},
],

12
docs/src/pages/framed/UIShell/HeaderNavRail.svelte
View file

@ -16,7 +16,7 @@
Row,
Column,
} from "carbon-components-svelte";
import Fade16 from "carbon-icons-svelte/lib/Fade16";
import Fade from "carbon-icons-svelte/lib/Fade.svelte";
let isSideNavOpen = false;
</script>
@ -39,16 +39,16 @@
<SideNav bind:isOpen="{isSideNavOpen}" rail>
<SideNavItems>
<SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected />
<SideNavLink icon="{Fade16}" text="Link 2" href="/" />
<SideNavLink icon="{Fade16}" text="Link 3" href="/" />
<SideNavMenu icon="{Fade16}" text="Menu">
<SideNavLink icon="{Fade}" text="Link 1" href="/" isSelected />
<SideNavLink icon="{Fade}" text="Link 2" href="/" />
<SideNavLink icon="{Fade}" text="Link 3" href="/" />
<SideNavMenu icon="{Fade}" text="Menu">
<SideNavMenuItem href="/" text="Link 1" />
<SideNavMenuItem href="/" text="Link 2" />
<SideNavMenuItem href="/" text="Link 3" />
</SideNavMenu>
<SideNavDivider />
<SideNavLink icon="{Fade16}" text="Link 4" href="/" />
<SideNavLink icon="{Fade}" text="Link 4" href="/" />
</SideNavItems>
</SideNav>
</Header>

10
docs/src/pages/framed/UIShell/HeaderUtilities.svelte
View file

@ -18,8 +18,8 @@
Row,
Column,
} from "carbon-components-svelte";
import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
import UserAvatarFilledAlt20 from "carbon-icons-svelte/lib/UserAvatarFilledAlt20";
import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte";
import UserAvatarFilledAlt from "carbon-icons-svelte/lib/UserAvatarFilledAlt.svelte";
let isSideNavOpen = false;
let isOpen1 = false;
@ -31,11 +31,11 @@
<SkipToContent />
</svelte:fragment>
<HeaderUtilities>
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
<HeaderAction
bind:isOpen="{isOpen1}"
icon="{UserAvatarFilledAlt20}"
closeIcon="{UserAvatarFilledAlt20}"
icon="{UserAvatarFilledAlt}"
closeIcon="{UserAvatarFilledAlt}"
>
<HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>

6
docs/src/pages/framed/_reset.svelte
View file

@ -22,7 +22,11 @@
padding: var(--cds-spacing-06) var(--cds-spacing-05);
}
:global(.framed [class^="bx--col"]) {
:global(.framed :not(.bx--content) [class^="bx--col"]) {
outline: 1px solid var(--cds-interactive-04);
}
:global(.framed .bx--content [class^="bx--col"]) {
outline: 0;
}
</style>

2
docs/src/pages/index.svelte
View file

@ -268,7 +268,7 @@
<TileCard
borderBottom
title="Carbon Icons Svelte"
subtitle="7000+ icons"
subtitle="1900+ icons"
target="_blank"
href="https://github.com/carbon-design-system/carbon-icons-svelte"
/>

8
docs/yarn.lock
View file

@ -185,10 +185,10 @@ carbon-components-svelte@../:
dependencies:
flatpickr "4.6.9"
carbon-icons-svelte@^10.45.1:
version "10.45.1"
resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.45.1.tgz#210b8d8906bbdc4611dbc06f1030bca26169c2d9"
integrity sha512-Uz3byPkSBzjpvLmjt/ZWYJkQG1omfqKh1vzF1FeFYOYqbGOCwc4sHbyF8oet2CseT2cECn1BbEyY4yWvlWYd/w==
carbon-icons-svelte@^11.0.1:
version "11.0.1"
resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-11.0.1.tgz#65b09832e9e0fa899d631564323e92e6ab878930"
integrity sha512-0CCJLmHW3yJ8T9DM2HNGQx304b2VLGY13Xeg6T1cJWeU2oTPIvBbTfveChIULBBI9FIFGLB9m8ZZgeYWEjAAew==
caseless@~0.12.0:
version "0.12.0"

2
package.json
View file

@ -28,7 +28,7 @@
"autoprefixer": "^10.4.4",
"carbon-components": "10.56.0",
"carbon-components-10.47": "npm:carbon-components@10.47",
"carbon-icons-svelte": "^10.45.1",
"carbon-icons-svelte": "^11.0.1",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",
"postcss": "^8.4.12",

7
src/Accordion/AccordionItem.svelte
View file

@ -15,7 +15,7 @@
export let iconDescription = "Expand/Collapse";
import { onMount, getContext } from "svelte";
import ChevronRight16 from "../icons/ChevronRight16.svelte";
import ChevronRight from "../icons/ChevronRight.svelte";
let initialDisabled = disabled;
@ -68,10 +68,7 @@
}
}}"
>
<ChevronRight16
class="bx--accordion__arrow"
aria-label="{iconDescription}"
/>
<ChevronRight class="bx--accordion__arrow" aria-label="{iconDescription}" />
<div class:bx--accordion__title="{true}">
<slot name="title">{title}</slot>
</div>

6
src/Accordion/AccordionSkeleton.svelte
View file

@ -17,7 +17,7 @@
/** Set to `false` to close the first accordion item */
export let open = true;
import ChevronRight16 from "../icons/ChevronRight16.svelte";
import ChevronRight from "../icons/ChevronRight.svelte";
import SkeletonText from "../SkeletonText/SkeletonText.svelte";
</script>
@ -41,7 +41,7 @@
class:bx--accordion__item--active="{true}"
>
<span class:bx--accordion__heading="{true}">
<ChevronRight16 class="bx--accordion__arrow" />
<ChevronRight class="bx--accordion__arrow" />
<SkeletonText class="bx--accordion__title" />
</span>
<div class="bx--accordion__content">
@ -54,7 +54,7 @@
{#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
<li class="bx--accordion__item">
<span class="bx--accordion__heading">
<ChevronRight16 class="bx--accordion__arrow" />
<ChevronRight class="bx--accordion__arrow" />
<SkeletonText class="bx--accordion__title" />
</span>
</li>

4
src/CodeSnippet/CodeSnippet.svelte
View file

@ -89,7 +89,7 @@
export let ref = null;
import { createEventDispatcher, tick, onMount } from "svelte";
import ChevronDown16 from "../icons/ChevronDown16.svelte";
import ChevronDown from "../icons/ChevronDown.svelte";
import Button from "../Button/Button.svelte";
import CopyButton from "../CopyButton/CopyButton.svelte";
import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
@ -243,7 +243,7 @@
}}"
>
<span class:bx--snippet-btn--text="{true}">{expandText}</span>
<ChevronDown16
<ChevronDown
class="bx--icon-chevron--down bx--snippet__icon"
aria-label="{expandText}"
/>

12
src/ComboBox/ComboBox.svelte
View file

@ -100,9 +100,9 @@
export let listRef = null;
import { createEventDispatcher, afterUpdate, tick } from "svelte";
import Checkmark16 from "../icons/Checkmark16.svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
import Checkmark from "../icons/Checkmark.svelte";
import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import ListBox from "../ListBox/ListBox.svelte";
import ListBoxField from "../ListBox/ListBoxField.svelte";
import ListBoxMenu from "../ListBox/ListBoxMenu.svelte";
@ -314,10 +314,10 @@
}}"
/>
{#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" />
<WarningFilled class="bx--list-box__invalid-icon" />
{/if}
{#if !invalid && warn}
<WarningAltFilled16
<WarningAltFilled
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
/>
{/if}
@ -368,7 +368,7 @@
{itemToString(item)}
</slot>
{#if selectedItem && selectedItem.id === item.id}
<Checkmark16 class="bx--list-box__menu-item__selected-icon" />
<Checkmark class="bx--list-box__menu-item__selected-icon" />
{/if}
</ListBoxMenuItem>
{/each}

4
src/ComposedModal/ModalHeader.svelte
View file

@ -21,7 +21,7 @@
export let iconDescription = "Close";
import { getContext } from "svelte";
import Close20 from "../icons/Close20.svelte";
import Close from "../icons/Close.svelte";
const { closeModal, updateLabel } = getContext("ComposedModal");
@ -57,6 +57,6 @@
on:click
on:click="{closeModal}"
>
<Close20 class="bx--modal-close__icon {closeIconClass}" />
<Close size="{20}" class="bx--modal-close__icon {closeIconClass}" />
</button>
</div>

10
src/ContextMenu/ContextMenuOption.svelte
View file

@ -50,8 +50,8 @@
import { onMount, getContext, createEventDispatcher, tick } from "svelte";
import ContextMenu from "./ContextMenu.svelte";
import Checkmark16 from "../icons/Checkmark16.svelte";
import CaretRight16 from "../icons/CaretRight16.svelte";
import Checkmark from "../icons/Checkmark.svelte";
import CaretRight from "../icons/CaretRight.svelte";
const dispatch = createEventDispatcher();
const ctx = getContext("ContextMenu");
@ -145,7 +145,7 @@
if (selected) {
if (ctxGroup) ctxGroup.addOption({ id });
icon = Checkmark16;
icon = Checkmark;
} else {
icon = undefined;
}
@ -158,7 +158,7 @@
if (selected) {
if (ctxRadioGroup) ctxRadioGroup.setOption({ id });
icon = Checkmark16;
icon = Checkmark;
} else {
icon = undefined;
}
@ -253,7 +253,7 @@
<span class:bx--menu-option__label="{true}" title="{labelText}">
<slot name="labelText">{labelText}</slot>
</span>
<div class:bx--menu-option__info="{true}"><CaretRight16 /></div>
<div class:bx--menu-option__info="{true}"><CaretRight /></div>
</div>
<ContextMenu

4
src/CopyButton/CopyButton.svelte
View file

@ -27,7 +27,7 @@
};
import { createEventDispatcher, onMount } from "svelte";
import Copy16 from "../icons/Copy16.svelte";
import Copy from "../icons/Copy.svelte";
const dispatch = createEventDispatcher();
@ -71,7 +71,7 @@
}
}}"
>
<Copy16 class="bx--snippet__icon" />
<Copy class="bx--snippet__icon" />
<span
aria-hidden="true"
class:bx--assistive-text="{true}"

6
src/DataTable/DataTable.svelte
View file

@ -114,7 +114,7 @@
import { createEventDispatcher, setContext } from "svelte";
import { writable, derived } from "svelte/store";
import ChevronRight16 from "../icons/ChevronRight16.svelte";
import ChevronRight from "../icons/ChevronRight.svelte";
import InlineCheckbox from "../Checkbox/InlineCheckbox.svelte";
import RadioButton from "../RadioButton/RadioButton.svelte";
import Table from "./Table.svelte";
@ -286,7 +286,7 @@
dispatch('click:header--expand', { expanded });
}}"
>
<ChevronRight16 class="bx--table-expand__svg" />
<ChevronRight class="bx--table-expand__svg" />
</button>
{/if}
</th>
@ -413,7 +413,7 @@
});
}}"
>
<ChevronRight16 class="bx--table-expand__svg" />
<ChevronRight class="bx--table-expand__svg" />
</button>
{/if}
</TableCell>

13
src/DataTable/TableHeader.svelte
View file

@ -15,8 +15,8 @@
export let id = "ccs-" + Math.random().toString(36);
import { getContext } from "svelte";
import ArrowUp20 from "../icons/ArrowUp20.svelte";
import ArrowsVertical20 from "../icons/ArrowsVertical20.svelte";
import ArrowUp from "../icons/ArrowUp.svelte";
import ArrowsVertical from "../icons/ArrowsVertical.svelte";
const { sortHeader, tableSortable } = getContext("DataTable");
@ -46,8 +46,13 @@
<div class:bx--table-header-label="{true}">
<slot />
</div>
<ArrowUp20 aria-label="{ariaLabel}" class="bx--table-sort__icon" />
<ArrowsVertical20
<ArrowUp
size="{20}"
aria-label="{ariaLabel}"
class="bx--table-sort__icon"
/>
<ArrowsVertical
size="{20}"
aria-label="{ariaLabel}"
class="bx--table-sort__icon-unsorted"
/>

4
src/DataTable/ToolbarMenu.svelte
View file

@ -2,7 +2,7 @@
/** @extends {"../OverflowMenu/OverflowMenu.svelte"} OverflowMenuProps */
import { getContext } from "svelte";
import Settings16 from "../icons/Settings16.svelte";
import Settings from "../icons/Settings.svelte";
import OverflowMenu from "../OverflowMenu/OverflowMenu.svelte";
const ctx = getContext("Toolbar");
@ -15,7 +15,7 @@
<OverflowMenu
bind:menuRef
icon="{Settings16}"
icon="{Settings}"
{...$$restProps}
class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
flipped

14
src/DatePicker/DatePickerInput.svelte
View file

@ -54,9 +54,9 @@
export let ref = null;
import { getContext } from "svelte";
import Calendar16 from "../icons/Calendar16.svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
import Calendar from "../icons/Calendar.svelte";
import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
const {
range,
@ -138,22 +138,20 @@
/>
{#if !$hasCalendar}
{#if invalid}
<WarningFilled16
<WarningFilled
class="bx--date-picker__icon bx--date-picker__icon--invalid"
/>
{/if}
{#if !invalid && warn}
<WarningAltFilled16
<WarningAltFilled
class="bx--date-picker__icon bx--date-picker__icon--warn"
/>
{/if}
{/if}
{#if $hasCalendar}
<Calendar16
role="img"
<Calendar
class="bx--date-picker__icon"
aria-label="{iconDescription}"
title="{iconDescription}"
on:click="{openCalendar}"
/>
{/if}

8
src/Dropdown/Dropdown.svelte
View file

@ -101,8 +101,8 @@
export let ref = null;
import { createEventDispatcher } from "svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import {
ListBox,
ListBoxMenu,
@ -190,10 +190,10 @@
warnText="{warnText}"
>
{#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" />
<WarningFilled class="bx--list-box__invalid-icon" />
{/if}
{#if !invalid && warn}
<WarningAltFilled16
<WarningAltFilled
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
/>
{/if}

12
src/FileUploader/Filename.svelte
View file

@ -11,9 +11,9 @@
/** Set to `true` to indicate an invalid state */
export let invalid = false;
import Close16 from "../icons/Close16.svelte";
import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte";
import Close from "../icons/Close.svelte";
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
import WarningFilled from "../icons/WarningFilled.svelte";
import Loading from "../Loading/Loading.svelte";
</script>
@ -28,9 +28,9 @@
{#if status === "edit"}
{#if invalid}
<WarningFilled16 class="bx--file-invalid" />
<WarningFilled class="bx--file-invalid" />
{/if}
<Close16
<Close
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--file-close"
@ -41,7 +41,7 @@
{/if}
{#if status === "complete"}
<CheckmarkFilled16
<CheckmarkFilled
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--file-complete"

8
src/InlineLoading/InlineLoading.svelte
View file

@ -21,8 +21,8 @@
export let successDelay = 1500;
import { createEventDispatcher, afterUpdate, onMount } from "svelte";
import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
import ErrorFilled16 from "../icons/ErrorFilled16.svelte";
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
import ErrorFilled from "../icons/ErrorFilled.svelte";
import Loading from "../Loading/Loading.svelte";
const dispatch = createEventDispatcher();
@ -56,12 +56,12 @@
>
<div class:bx--inline-loading__animation="{true}">
{#if status === "error"}
<ErrorFilled16
<ErrorFilled
class="bx--inline-loading--error"
title="{iconDescription}"
/>
{:else if status === "finished"}
<CheckmarkFilled16
<CheckmarkFilled
class="bx--inline-loading__checkmark-container"
title="{iconDescription}"
/>

4
src/Link/OutboundLink.svelte
View file

@ -2,7 +2,7 @@
/** @extends {"./Link.svelte"} LinkProps */
import Link from "./Link.svelte";
import Launch16 from "../icons/Launch16.svelte";
import Launch from "../icons/Launch.svelte";
</script>
<Link
@ -12,7 +12,7 @@
on:mouseenter
on:mouseleave
target="_blank"
icon="{Launch16}"
icon="{Launch}"
>
<slot />
</Link>

4
src/ListBox/ListBoxMenuIcon.svelte
View file

@ -15,7 +15,7 @@
*/
export let translateWithId = (id) => defaultTranslations[id];
import ChevronDown16 from "../icons/ChevronDown16.svelte";
import ChevronDown from "../icons/ChevronDown.svelte";
const defaultTranslations = {
[translationIds.close]: "Close menu",
@ -31,5 +31,5 @@
{...$$restProps}
on:click|preventDefault
>
<ChevronDown16 aria-label="{description}" title="{description}" />
<ChevronDown aria-label="{description}" title="{description}" />
</div>

6
src/ListBox/ListBoxSelection.svelte
View file

@ -28,7 +28,7 @@
export let ref = null;
import { createEventDispatcher, getContext } from "svelte";
import Close16 from "../icons/Close16.svelte";
import Close from "../icons/Close.svelte";
const defaultTranslations = {
[translationIds.clearAll]: "Clear all selected items",
@ -75,7 +75,7 @@
aria-label="{translationIds.clearAll}"
title="{description}"
>
<Close16 />
<Close />
</div>
</div>
{:else}
@ -101,6 +101,6 @@
}}"
>
{#if selectionCount !== undefined}{selectionCount}{/if}
<Close16 />
<Close />
</div>
{/if}

8
src/Modal/Modal.svelte
View file

@ -90,7 +90,7 @@
export let ref = null;
import { createEventDispatcher, onMount, afterUpdate } from "svelte";
import Close20 from "../icons/Close20.svelte";
import Close from "../icons/Close.svelte";
import Button from "../Button/Button.svelte";
const dispatch = createEventDispatcher();
@ -228,7 +228,8 @@
open = false;
}}"
>
<Close20
<Close
size="{20}"
aria-label="{iconDescription}"
class="bx--modal-close__icon"
/>
@ -253,7 +254,8 @@
open = false;
}}"
>
<Close20
<Close
size="{20}"
aria-label="{iconDescription}"
class="bx--modal-close__icon"
/>

10
src/MultiSelect/MultiSelect.svelte
View file

@ -161,8 +161,8 @@
export let highlightedId = null;
import { afterUpdate, createEventDispatcher, setContext } from "svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import Checkbox from "../Checkbox/Checkbox.svelte";
import {
ListBox,
@ -300,10 +300,10 @@
{checked.length > 0 && 'bx--multi-select--selected'}"
>
{#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" />
<WarningFilled class="bx--list-box__invalid-icon" />
{/if}
{#if !invalid && warn}
<WarningAltFilled16
<WarningAltFilled
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
/>
{/if}
@ -431,7 +431,7 @@
value="{inputValue}"
/>
{#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" />
<WarningFilled class="bx--list-box__invalid-icon" />
{/if}
{#if inputValue}
<ListBoxSelection

5
src/Notification/NotificationButton.svelte
View file

@ -9,7 +9,7 @@
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent}
*/
export let icon = Close20;
export let icon = Close;
/**
* Specify the title of the icon
@ -20,7 +20,7 @@
/** Specify the ARIA label for the icon */
export let iconDescription = "Close icon";
import Close20 from "../icons/Close20.svelte";
import Close from "../icons/Close.svelte";
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
@ -38,6 +38,7 @@
>
<svelte:component
this="{icon}"
size="{20}"
title="{title}"
class="bx--{notificationType}-notification__close-icon"
/>

25
src/Notification/NotificationIcon.svelte
View file

@ -14,25 +14,26 @@
/** Specify the ARIA label for the icon */
export let iconDescription = "Closes notification";
import CheckmarkFilled20 from "../icons/CheckmarkFilled20.svelte";
import ErrorFilled20 from "../icons/ErrorFilled20.svelte";
import InformationFilled20 from "../icons/InformationFilled20.svelte";
import InformationSquareFilled20 from "../icons/InformationSquareFilled20.svelte";
import WarningFilled20 from "../icons/WarningFilled20.svelte";
import WarningAltFilled20 from "../icons/WarningAltFilled20.svelte";
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
import ErrorFilled from "../icons/ErrorFilled.svelte";
import InformationFilled from "../icons/InformationFilled.svelte";
import InformationSquareFilled from "../icons/InformationSquareFilled.svelte";
import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
const icons = {
error: ErrorFilled20,
"info-square": InformationSquareFilled20,
info: InformationFilled20,
success: CheckmarkFilled20,
warning: WarningFilled20,
"warning-alt": WarningAltFilled20,
error: ErrorFilled,
"info-square": InformationSquareFilled,
info: InformationFilled,
success: CheckmarkFilled,
warning: WarningFilled,
"warning-alt": WarningAltFilled,
};
</script>
<svelte:component
this="{icons[kind]}"
size="{20}"
title="{iconDescription}"
class="bx--{notificationType}-notification__icon"
/>

20
src/NumberInput/NumberInput.svelte
View file

@ -100,11 +100,11 @@
export let ref = null;
import { createEventDispatcher } from "svelte";
import Add16 from "../icons/Add16.svelte";
import Subtract16 from "../icons/Subtract16.svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
import EditOff16 from "../icons/EditOff16.svelte";
import Add from "../icons/Add.svelte";
import Subtract from "../icons/Subtract.svelte";
import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import EditOff from "../icons/EditOff.svelte";
const defaultTranslations = {
[translationIds.increment]: "Increment number",
@ -207,15 +207,15 @@
on:blur
/>
{#if invalid}
<WarningFilled16 class="bx--number__invalid" />
<WarningFilled class="bx--number__invalid" />
{/if}
{#if !invalid && warn}
<WarningAltFilled16
<WarningAltFilled
class="bx--number__invalid bx--number__invalid--warning"
/>
{/if}
{#if readonly}
<EditOff16 class="bx--text-input__readonly-icon" />
<EditOff class="bx--text-input__readonly-icon" />
{/if}
{#if !hideSteppers}
<div class:bx--number__controls="{true}">
@ -231,7 +231,7 @@
}}"
disabled="{disabled}"
>
<Subtract16 class="down-icon" />
<Subtract class="down-icon" />
</button>
<div class:bx--number__rule-divider="{true}"></div>
<button
@ -246,7 +246,7 @@
}}"
disabled="{disabled}"
>
<Add16 class="up-icon" />
<Add class="up-icon" />
</button>
<div class:bx--number__rule-divider="{true}"></div>
</div>

11
src/OverflowMenu/OverflowMenu.svelte
View file

@ -31,10 +31,11 @@
export let menuOptionsClass = undefined;
/**
* Specify the icon to render
* Specify the icon to render.
* Defaults to `<OverflowMenuVertical />`
* @type {typeof import("svelte").SvelteComponent}
*/
export let icon = OverflowMenuVertical16;
export let icon = OverflowMenuVertical;
/**
* Specify the icon class
@ -61,8 +62,8 @@
afterUpdate,
} from "svelte";
import { writable } from "svelte/store";
import OverflowMenuVertical16 from "../icons/OverflowMenuVertical16.svelte";
import OverflowMenuHorizontal16 from "../icons/OverflowMenuHorizontal16.svelte";
import OverflowMenuVertical from "../icons/OverflowMenuVertical.svelte";
import OverflowMenuHorizontal from "../icons/OverflowMenuHorizontal.svelte";
const ctxBreadcrumbItem = getContext("BreadcrumbItem");
const dispatch = createEventDispatcher();
@ -75,7 +76,7 @@
let onMountAfterUpdate = true;
$: if (ctxBreadcrumbItem) {
icon = OverflowMenuHorizontal16;
icon = OverflowMenuHorizontal;
}
setContext("OverflowMenu", {

8
src/Pagination/Pagination.svelte
View file

@ -71,8 +71,8 @@
export let id = "ccs-" + Math.random().toString(36);
import { afterUpdate, createEventDispatcher } from "svelte";
import CaretLeft16 from "../icons/CaretLeft16.svelte";
import CaretRight16 from "../icons/CaretRight16.svelte";
import CaretLeft from "../icons/CaretLeft.svelte";
import CaretRight from "../icons/CaretRight.svelte";
import Button from "../Button/Button.svelte";
import Select from "../Select/Select.svelte";
import SelectItem from "../Select/SelectItem.svelte";
@ -161,7 +161,7 @@
kind="ghost"
tooltipAlignment="center"
tooltipPosition="top"
icon="{CaretLeft16}"
icon="{CaretLeft}"
iconDescription="{backwardText}"
disabled="{backButtonDisabled}"
class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled
@ -176,7 +176,7 @@
kind="ghost"
tooltipAlignment="end"
tooltipPosition="top"
icon="{CaretRight16}"
icon="{CaretRight}"
iconDescription="{forwardText}"
disabled="{forwardButtonDisabled}"
class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled

8
src/PaginationNav/PaginationNav.svelte
View file

@ -24,8 +24,8 @@
export let backwardText = "Previous page";
import { afterUpdate, createEventDispatcher } from "svelte";
import CaretLeft16 from "../icons/CaretLeft16.svelte";
import CaretRight16 from "../icons/CaretRight16.svelte";
import CaretLeft from "../icons/CaretLeft.svelte";
import CaretRight from "../icons/CaretRight.svelte";
import PaginationItem from "./PaginationItem.svelte";
import PaginationOverflow from "./PaginationOverflow.svelte";
import Button from "../Button/Button.svelte";
@ -76,7 +76,7 @@
tooltipPosition="bottom"
iconDescription="{backwardText}"
disabled="{!loop && page === 0}"
icon="{CaretLeft16}"
icon="{CaretLeft}"
on:click="{() => {
if (page - 1 < 0) {
if (loop) page = total - 1;
@ -133,7 +133,7 @@
tooltipPosition="bottom"
iconDescription="{forwardText}"
disabled="{!loop && page === total - 1}"
icon="{CaretRight16}"
icon="{CaretRight}"
on:click="{() => {
if (page + 1 >= total) {
if (loop) page = 0;

4
src/PaginationNav/PaginationOverflow.svelte
View file

@ -10,7 +10,7 @@
export let count = 0;
import { createEventDispatcher } from "svelte";
import OverflowMenuHorizontal16 from "../icons/OverflowMenuHorizontal16.svelte";
import OverflowMenuHorizontal from "../icons/OverflowMenuHorizontal.svelte";
import PaginationItem from "./PaginationItem.svelte";
const dispatch = createEventDispatcher();
@ -40,7 +40,7 @@
{/each}
</select>
<div class:bx--pagination-nav__select-icon-wrapper="{true}">
<OverflowMenuHorizontal16 class="bx--pagination-nav__select-icon" />
<OverflowMenuHorizontal class="bx--pagination-nav__select-icon" />
</div>
</div>
</li>

16
src/ProgressIndicator/ProgressStep.svelte
View file

@ -24,10 +24,10 @@
export let id = "ccs-" + Math.random().toString(36);
import { onMount, getContext } from "svelte";
import CheckmarkOutline16 from "../icons/CheckmarkOutline16.svelte";
import Warning16 from "../icons/Warning16.svelte";
import CircleDash16 from "../icons/CircleDash16.svelte";
import Incomplete16 from "../icons/Incomplete16.svelte";
import CheckmarkOutline from "../icons/CheckmarkOutline.svelte";
import Warning from "../icons/Warning.svelte";
import CircleDash from "../icons/CircleDash.svelte";
import Incomplete from "../icons/Incomplete.svelte";
let step = {};
@ -84,13 +84,13 @@
}}"
>
{#if invalid}
<Warning16 class="bx--progress__warning" title="{description}" />
<Warning class="bx--progress__warning" title="{description}" />
{:else if current}
<Incomplete16 title="{description}" />
<Incomplete title="{description}" />
{:else if complete}
<CheckmarkOutline16 title="{description}" />
<CheckmarkOutline title="{description}" />
{:else}
<CircleDash16 title="{description}" />
<CircleDash title="{description}" />
{/if}
<slot props="{{ class: 'bx--progress-label' }}">
<p class:bx--progress-label="{true}">{label}</p>

12
src/Search/Search.svelte
View file

@ -53,10 +53,11 @@
export let labelText = "";
/**
* Specify the icon to render
* Specify the icon to render.
* Defaults to `<Search />`
* @type {typeof import("svelte").SvelteComponent}
*/
export let icon = Search16;
export let icon = IconSearch;
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
@ -65,9 +66,8 @@
export let ref = null;
import { createEventDispatcher } from "svelte";
import Close16 from "../icons/Close16.svelte";
import Close20 from "../icons/Close20.svelte";
import Search16 from "../icons/Search16.svelte";
import Close from "../icons/Close.svelte";
import IconSearch from "../icons/IconSearch.svelte";
import SearchSkeleton from "./SearchSkeleton.svelte";
const dispatch = createEventDispatcher();
@ -162,7 +162,7 @@
dispatch('clear');
}}"
>
<svelte:component this="{size === 'xl' ? Close20 : Close16}" />
<svelte:component this="{Close}" size="{size === 'xl' ? 20 : 16}" />
</button>
</div>
{/if}

16
src/Select/Select.svelte
View file

@ -65,9 +65,9 @@
import { createEventDispatcher, setContext, afterUpdate } from "svelte";
import { writable } from "svelte/store";
import ChevronDown16 from "../icons/ChevronDown16.svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
import ChevronDown from "../icons/ChevronDown.svelte";
import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
const dispatch = createEventDispatcher();
const selectedValue = writable(selected);
@ -129,9 +129,9 @@
>
<slot />
</select>
<ChevronDown16 class="bx--select__arrow" />
<ChevronDown class="bx--select__arrow" />
{#if invalid}
<WarningFilled16 class="bx--select__invalid-icon" />
<WarningFilled class="bx--select__invalid-icon" />
{/if}
</div>
{#if invalid}
@ -173,12 +173,12 @@
>
<slot />
</select>
<ChevronDown16 class="bx--select__arrow" />
<ChevronDown class="bx--select__arrow" />
{#if invalid}
<WarningFilled16 class="bx--select__invalid-icon" />
<WarningFilled class="bx--select__invalid-icon" />
{/if}
{#if !invalid && warn}
<WarningAltFilled16
<WarningAltFilled
class="bx--select__invalid-icon bx--select__invalid-icon--warning"
/>
{/if}

4
src/Tabs/Tabs.svelte
View file

@ -22,7 +22,7 @@
import { createEventDispatcher, afterUpdate, setContext } from "svelte";
import { writable, derived } from "svelte/store";
import ChevronDownGlyph from "../icons/ChevronDownGlyph.svelte";
import ChevronDown from "../icons/ChevronDown.svelte";
const dispatch = createEventDispatcher();
@ -137,7 +137,7 @@
>
{#if currentTab}{currentTab.label}{/if}
</a>
<ChevronDownGlyph aria-hidden="true" title="{iconDescription}" />
<ChevronDown aria-hidden="true" title="{iconDescription}" />
</div>
<ul
role="tablist"

4
src/Tag/Tag.svelte
View file

@ -35,7 +35,7 @@
export let id = "ccs-" + Math.random().toString(36);
import { createEventDispatcher } from "svelte";
import Close16 from "../icons/Close16.svelte";
import Close from "../icons/Close.svelte";
import TagSkeleton from "./TagSkeleton.svelte";
const dispatch = createEventDispatcher();
@ -89,7 +89,7 @@
on:mouseenter
on:mouseleave
>
<Close16 />
<Close />
</button>
</div>
{:else if interactive}

4
src/TextArea/TextArea.svelte
View file

@ -53,7 +53,7 @@
/** Obtain a reference to the textarea HTML element */
export let ref = null;
import WarningFilled16 from "../icons/WarningFilled16.svelte";
import WarningFilled from "../icons/WarningFilled.svelte";
$: errorId = `error-${id}`;
</script>
@ -90,7 +90,7 @@
data-invalid="{invalid || undefined}"
>
{#if invalid}
<WarningFilled16 class="bx--text-area__invalid-icon" />
<WarningFilled class="bx--text-area__invalid-icon" />
{/if}
<textarea
bind:this="{ref}"

16
src/TextInput/PasswordInput.svelte
View file

@ -81,10 +81,10 @@
export let ref = null;
import { getContext } from "svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
import View16 from "../icons/View16.svelte";
import ViewOff16 from "../icons/ViewOff16.svelte";
import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import View from "../icons/View.svelte";
import ViewOff from "../icons/ViewOff.svelte";
const ctx = getContext("Form");
@ -154,10 +154,10 @@
data-invalid="{invalid || undefined}"
>
{#if invalid}
<WarningFilled16 class="bx--text-input__invalid-icon" />
<WarningFilled class="bx--text-input__invalid-icon" />
{/if}
{#if !invalid && warn}
<WarningAltFilled16
<WarningAltFilled
class="bx--text-input__invalid-icon
bx--text-input__invalid-icon--warning"
/>
@ -213,9 +213,9 @@
</span>
{/if}
{#if type === "text"}
<ViewOff16 class="bx--icon-visibility-off" />
<ViewOff class="bx--icon-visibility-off" />
{:else}
<View16 class="bx--icon-visibility-on" />
<View class="bx--icon-visibility-on" />
{/if}
</button>
</div>

12
src/TextInput/TextInput.svelte
View file

@ -71,9 +71,9 @@
export let readonly = false;
import { createEventDispatcher, getContext } from "svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
import EditOff16 from "../icons/EditOff16.svelte";
import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import EditOff from "../icons/EditOff.svelte";
const ctx = getContext("Form");
const dispatch = createEventDispatcher();
@ -163,16 +163,16 @@
class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
>
{#if invalid}
<WarningFilled16 class="bx--text-input__invalid-icon" />
<WarningFilled class="bx--text-input__invalid-icon" />
{/if}
{#if !invalid && warn}
<WarningAltFilled16
<WarningAltFilled
class="bx--text-input__invalid-icon
bx--text-input__invalid-icon--warning"
/>
{/if}
{#if readonly}
<EditOff16 class="bx--text-input__readonly-icon" />
<EditOff class="bx--text-input__readonly-icon" />
{/if}
<input
bind:this="{ref}"

4
src/Tile/ExpandableTile.svelte
View file

@ -33,7 +33,7 @@
export let ref = null;
import { afterUpdate } from "svelte";
import ChevronDown16 from "../icons/ChevronDown16.svelte";
import ChevronDown from "../icons/ChevronDown.svelte";
let refAbove = null;
@ -83,7 +83,7 @@
</div>
<div class:bx--tile__chevron="{true}">
<span>{expanded ? tileExpandedLabel : tileCollapsedLabel}</span>
<ChevronDown16 />
<ChevronDown />
</div>
<div class:bx--tile-content="{true}">
<span class:bx--tile-content__below-the-fold="{true}">

7
src/Tile/RadioTile.svelte
View file

@ -24,7 +24,7 @@
export let name = "";
import { getContext } from "svelte";
import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
const { add, update, selectedValue } = getContext("TileGroup");
@ -71,10 +71,7 @@
on:mouseleave
>
<span class:bx--tile__checkmark="{true}">
<CheckmarkFilled16
aria-label="{iconDescription}"
title="{iconDescription}"
/>
<CheckmarkFilled aria-label="{iconDescription}" title="{iconDescription}" />
</span>
<span class:bx--tile-content="{true}">
<slot />

7
src/Tile/SelectableTile.svelte
View file

@ -33,7 +33,7 @@
export let ref = null;
import { createEventDispatcher } from "svelte";
import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
const dispatch = createEventDispatcher();
@ -80,10 +80,7 @@
}}"
>
<span class:bx--tile__checkmark="{true}">
<CheckmarkFilled16
aria-label="{iconDescription}"
title="{iconDescription}"
/>
<CheckmarkFilled aria-label="{iconDescription}" title="{iconDescription}" />
</span>
<span class:bx--tile-content="{true}">
<slot />

4
src/TimePicker/TimePickerSelect.svelte
View file

@ -28,7 +28,7 @@
import { setContext } from "svelte";
import { writable } from "svelte/store";
import ChevronDownGlyph from "../icons/ChevronDownGlyph.svelte";
import ChevronDown from "../icons/ChevronDown.svelte";
const selectedValue = writable(value);
@ -73,7 +73,7 @@
>
<slot />
</select>
<ChevronDownGlyph
<ChevronDown
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--select__arrow"

8
src/Tooltip/Tooltip.svelte
View file

@ -29,11 +29,11 @@
export let hideIcon = false;
/**
* Specify the icon to render for the tooltip button
* Icon size must be 16px (e.g., `Add16`, `Task16`)
* Specify the icon to render for the tooltip button.
* Default to `<Information />`
* @type {typeof import("svelte").SvelteComponent}
*/
export let icon = Information16;
export let icon = Information;
/** Specify the ARIA label for the tooltip button */
export let iconDescription = "";
@ -70,7 +70,7 @@
import { createEventDispatcher, afterUpdate, setContext } from "svelte";
import { writable } from "svelte/store";
import Information16 from "../icons/Information16.svelte";
import Information from "../icons/Information.svelte";
const dispatch = createEventDispatcher();
const tooltipOpen = writable(open);

4
src/TreeView/TreeViewNodeList.svelte
View file

@ -21,7 +21,7 @@
export let icon = undefined;
import { afterUpdate, getContext } from "svelte";
import CaretDown16 from "../icons/CaretDown16.svelte";
import CaretDown from "../icons/CaretDown.svelte";
import TreeViewNode, { computeTreeLeafDepth } from "./TreeViewNode.svelte";
let ref = null;
@ -142,7 +142,7 @@
toggleNode(node);
}}"
>
<CaretDown16
<CaretDown
class="bx--tree-parent-node__toggle-icon {expanded &&
'bx--tree-parent-node__toggle-icon--expanded'}"
/>

18
src/UIShell/HamburgerMenu.svelte
View file

@ -9,24 +9,24 @@
export let isOpen = false;
/**
* Specify the icon to render for the closed state
* Defaults to `Menu20`
* Specify the icon to render for the closed state.
* Defaults to `<Menu size={20} />`
* @type {typeof import("svelte").SvelteComponent}
*/
export let iconMenu = Menu20;
export let iconMenu = Menu;
/**
* Specify the icon to render for the opened state
* Defaults to `Close20`
* Specify the icon to render for the opened state.
* Defaults to `<Close size={20} />`
* @type {typeof import("svelte").SvelteComponent}
*/
export let iconClose = Close20;
export let iconClose = Close;
/** Obtain a reference to the HTML button element */
export let ref = null;
import Close20 from "../icons/Close20.svelte";
import Menu20 from "../icons/Menu20.svelte";
import Close from "../icons/Close.svelte";
import Menu from "../icons/Menu.svelte";
</script>
<button
@ -41,5 +41,5 @@
on:click
on:click="{() => (isOpen = !isOpen)}"
>
<svelte:component this="{isOpen ? iconClose : iconMenu}" />
<svelte:component this="{isOpen ? iconClose : iconMenu}" size="{20}" />
</button>

16
src/UIShell/Header.svelte
View file

@ -47,21 +47,21 @@
export let ref = null;
/**
* Specify the icon to render for the closed state
* Defaults to `Menu20`
* Specify the icon to render for the closed state.
* Defaults to `<Menu size={20} />`
* @type {typeof import("svelte").SvelteComponent}
*/
export let iconMenu = Menu20;
export let iconMenu = Menu;
/**
* Specify the icon to render for the opened state
* Defaults to `Close20`
* Specify the icon to render for the opened state.
* Defaults to `<Close size={20} />`
* @type {typeof import("svelte").SvelteComponent}
*/
export let iconClose = Close20;
export let iconClose = Close;
import Close20 from "../icons/Close20.svelte";
import Menu20 from "../icons/Menu20.svelte";
import Close from "../icons/Close.svelte";
import Menu from "../icons/Menu.svelte";
import { shouldRenderHamburgerMenu } from "./navStore";
import HamburgerMenu from "./HamburgerMenu.svelte";

18
src/UIShell/HeaderAction.svelte
View file

@ -3,16 +3,18 @@
export let isOpen = false;
/**
* Specify the icon to render
* Specify the icon to render when the action panel is closed.
* Defaults to `<Switcher size={20} />`
* @type {typeof import("svelte").SvelteComponent}
*/
export let icon = AppSwitcher20;
export let icon = Switcher;
/**
* Specify the icon to render when the action panel is open
* Specify the icon to render when the action panel is open.
* Defaults to `<Close size={20} />`
* @type {typeof import("svelte").SvelteComponent}
*/
export let closeIcon = Close20;
export let closeIcon = Close;
/**
* Specify the text
@ -33,8 +35,8 @@
import { createEventDispatcher } from "svelte";
import { slide } from "svelte/transition";
import Close20 from "../icons/Close20.svelte";
import AppSwitcher20 from "../icons/AppSwitcher20.svelte";
import Close from "../icons/Close.svelte";
import Switcher from "../icons/Switcher.svelte";
const dispatch = createEventDispatcher();
@ -65,11 +67,11 @@
>
{#if isOpen}
<slot name="closeIcon">
<svelte:component this="{closeIcon}" />
<svelte:component this="{closeIcon}" size="{20}" />
</slot>
{:else}
<slot name="icon">
<svelte:component this="{icon}" />
<svelte:component this="{icon}" size="{20}" />
</slot>
{/if}
<slot name="text">

2
src/UIShell/HeaderActionLink.svelte
View file

@ -27,7 +27,7 @@
{...$$restProps}
>
<slot name="icon">
<svelte:component this="{icon}" />
<svelte:component this="{icon}" size="{20}" />
</slot>
</a>

4
src/UIShell/HeaderNavMenu.svelte
View file

@ -16,7 +16,7 @@
import { setContext } from "svelte";
import { writable } from "svelte/store";
import ChevronDown16 from "../icons/ChevronDown16.svelte";
import ChevronDown from "../icons/ChevronDown.svelte";
const selectedItems = writable({});
@ -92,7 +92,7 @@
on:blur
>
{text}
<ChevronDown16 class="bx--header__menu-arrow" />
<ChevronDown class="bx--header__menu-arrow" />
</a>
<ul
bind:this="{menuRef}"

8
src/UIShell/HeaderSearch.svelte
View file

@ -27,8 +27,8 @@
export let selectedResultIndex = 0;
import { createEventDispatcher, tick } from "svelte";
import Close20 from "../icons/Close20.svelte";
import Search20 from "../icons/Search20.svelte";
import Close from "../icons/Close.svelte";
import IconSearch from "../icons/IconSearch.svelte";
const dispatch = createEventDispatcher();
@ -72,7 +72,7 @@
active = true;
}}"
>
<Search20 title="Search" />
<IconSearch size="{20}" title="Search" />
</button>
<input
bind:this="{ref}"
@ -125,7 +125,7 @@
dispatch('clear');
}}"
>
<Close20 title="Close" />
<Close size="{20}" title="Close" />
</button>
</div>

4
src/UIShell/SideNavMenu.svelte
View file

@ -17,7 +17,7 @@
/** Obtain a reference to the HTML button element */
export let ref = null;
import ChevronDown16 from "../icons/ChevronDown16.svelte";
import ChevronDown from "../icons/ChevronDown.svelte";
</script>
<li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
@ -45,7 +45,7 @@
class:bx--side-nav__icon--small="{true}"
class:bx--side-nav__submenu-chevron="{true}"
>
<svelte:component this="{ChevronDown16}" title="Open Menu" tabindex="0" />
<svelte:component this="{ChevronDown}" title="Open Menu" tabindex="0" />
</div>
</button>
<ul role="menu" class:bx--side-nav__menu="{true}">

28
src/icons/Add.svelte Normal file
View file

@ -0,0 +1,28 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path
d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"
></path>
</svg>

51
src/icons/Add16.svelte
View file

@ -1,51 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="Add16"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="16"
height="16"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path
d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"
></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

51
src/icons/AppSwitcher20.svelte
View file

@ -1,51 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="AppSwitcher20"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="20"
height="20"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path
d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"
></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

28
src/icons/ArrowUp.svelte Normal file
View file

@ -0,0 +1,28 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path
d="M16 4L6 14 7.41 15.41 15 7.83 15 28 17 28 17 7.83 24.59 15.41 26 14 16 4z"
></path>
</svg>

51
src/icons/ArrowUp20.svelte
View file

@ -1,51 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="ArrowUp20"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="20"
height="20"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path
d="M16 4L6 14 7.41 15.41 15 7.83 15 28 17 28 17 7.83 24.59 15.41 26 14 16 4z"
></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

28
src/icons/ArrowsVertical.svelte Normal file
View file

@ -0,0 +1,28 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path
d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"
></path>
</svg>

51
src/icons/ArrowsVertical20.svelte
View file

@ -1,51 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="ArrowsVertical20"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="20"
height="20"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path
d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"
></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

28
src/icons/Calendar.svelte Normal file
View file

@ -0,0 +1,28 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path
d="M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20 V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"
></path>
</svg>

51
src/icons/Calendar16.svelte
View file

@ -1,51 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="Calendar16"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="16"
height="16"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path
d="M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20 V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"
></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

26
src/icons/CaretDown.svelte Normal file
View file

@ -0,0 +1,26 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path d="M24 12L16 22 8 12z"></path>
</svg>

49
src/icons/CaretDown16.svelte
View file

@ -1,49 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="CaretDown16"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="16"
height="16"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path d="M24 12L16 22 8 12z"></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

26
src/icons/CaretLeft.svelte Normal file
View file

@ -0,0 +1,26 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path d="M20 24L10 16 20 8z"></path>
</svg>

49
src/icons/CaretLeft16.svelte
View file

@ -1,49 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="CaretLeft16"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="16"
height="16"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path d="M20 24L10 16 20 8z"></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

26
src/icons/CaretRight.svelte Normal file
View file

@ -0,0 +1,26 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path d="M12 8L22 16 12 24z"></path>
</svg>

49
src/icons/CaretRight16.svelte
View file

@ -1,49 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="CaretRight16"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="16"
height="16"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path d="M12 8L22 16 12 24z"></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

26
src/icons/Checkmark.svelte Normal file
View file

@ -0,0 +1,26 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path d="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"></path>
</svg>

Some files were not shown because too many files have changed in this diff Show more