diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css index 0847eb9c6..3daf4c239 100644 --- a/docs/assets/plugins/code-block/code-block.css +++ b/docs/assets/plugins/code-block/code-block.css @@ -89,11 +89,13 @@ box-shadow: var(--sl-focus-ring-box-shadow); } -.code-block__toggle sl-icon { +.code-block__toggle svg { + width: 1em; + height: 1em; margin-left: 0.25rem; transition: 250ms transform; } -.code-block--expanded .code-block__toggle sl-icon { +.code-block--expanded .code-block__toggle svg { transform: rotate(180deg); } diff --git a/docs/assets/plugins/code-block/code-block.js b/docs/assets/plugins/code-block/code-block.js index 3e8035303..3560a9e47 100644 --- a/docs/assets/plugins/code-block/code-block.js +++ b/docs/assets/plugins/code-block/code-block.js @@ -68,7 +68,20 @@ toggle.classList.add('code-block__toggle'); toggle.setAttribute('aria-expanded', 'false'); toggle.setAttribute('aria-controls', preId); - toggle.innerHTML = 'Source '; + toggle.innerHTML = ` + Source + + + + + `; codeBlock.prepend(preview); codeBlock.append(toggle); diff --git a/docs/components/alert.md b/docs/components/alert.md index 67c75be38..9b43b4076 100644 --- a/docs/components/alert.md +++ b/docs/components/alert.md @@ -12,7 +12,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
- + This one is a bit fancier because now it has an icon and is closable. ``` @@ -23,31 +23,31 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i ```html preview - + Your changes have been saved
You can continue working or safely leave the app now.
- + Your changes have been saved
You can continue working or safely leave the app now.
- + Your changes have been saved
You can continue working or safely leave the app now.
- + Your changes have been saved
You can continue working or safely leave the app now.
- + Your changes have been saved
You can continue working or safely leave the app now. diff --git a/docs/components/avatar.md b/docs/components/avatar.md index ee20454cc..fa126c820 100644 --- a/docs/components/avatar.md +++ b/docs/components/avatar.md @@ -31,15 +31,15 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i ### Custom Icon ```html preview + + + + - - - - - + ``` diff --git a/docs/components/button.md b/docs/components/button.md index b99e16271..7bc991390 100644 --- a/docs/components/button.md +++ b/docs/components/button.md @@ -47,9 +47,9 @@ Use the `size` prop to change a button's size. Use the `circle` prop to create circular icon buttons. ```html preview - - - + + + ``` ### Text @@ -78,16 +78,16 @@ Use the `prefix` and `suffix` slots to add icons. ```html preview - + Settings - + Refresh - - + + Open ``` diff --git a/docs/components/icon.md b/docs/components/icon.md index f09227cb6..a53d3cff7 100644 --- a/docs/components/icon.md +++ b/docs/components/icon.md @@ -4,19 +4,19 @@ Icons... -Default icons are courtesy of the [Feather Icons](https://feathericons.com/) project. +The icons that come bundled with Shoelace are courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. ```html preview - + - + @@ -33,16 +33,16 @@ Icon sizes are determined by the current font size. ```html preview
- + - + diff --git a/docs/components/input.md b/docs/components/input.md index 1c717e2f2..79447a887 100644 --- a/docs/components/input.md +++ b/docs/components/input.md @@ -28,17 +28,17 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i ```html preview - +
- +
- + ``` diff --git a/package-lock.json b/package-lock.json index bf2b87b57..fee912473 100644 --- a/package-lock.json +++ b/package-lock.json @@ -874,6 +874,11 @@ "type-is": "~1.6.17" } }, + "bootstrap-icons": { + "version": "1.0.0-alpha4", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.0.0-alpha4.tgz", + "integrity": "sha512-UcpSUPsvUiW7ueBQfXZSgknJv/rj060dglhWIRPjkLjUWa32jMWqsLXO8tXY2od4Ew6cuh0BJ3f8VOhQPVY4mA==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1542,11 +1547,6 @@ } } }, - "classnames": { - "version": "2.2.6", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" - }, "clean-stack": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", @@ -2695,22 +2695,6 @@ "reusify": "^1.0.4" } }, - "feather-icons": { - "version": "4.28.0", - "resolved": "https://registry.npmjs.org/feather-icons/-/feather-icons-4.28.0.tgz", - "integrity": "sha512-gRdqKESXRBUZn6Nl0VBq2wPHKRJgZz7yblrrc2lYsS6odkNFDnA4bqvrlEVRUPjE1tFax+0TdbJKZ31ziJuzjg==", - "requires": { - "classnames": "^2.2.5", - "core-js": "^3.1.3" - }, - "dependencies": { - "core-js": { - "version": "3.6.4", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.4.tgz", - "integrity": "sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==" - } - } - }, "figures": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", @@ -4125,15 +4109,6 @@ } } }, - "mkdirp": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", - "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", - "dev": true, - "requires": { - "minimist": "^1.2.5" - } - }, "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -5043,6 +5018,15 @@ "integrity": "sha1-0iXsIxMuie3Tj9p2dHLmLmXxEG0=", "dev": true }, + "mkdirp": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", + "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", + "dev": true, + "requires": { + "minimist": "^1.2.5" + } + }, "pify": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", diff --git a/package.json b/package.json index 08a8b0170..d621da930 100644 --- a/package.json +++ b/package.json @@ -52,8 +52,8 @@ "@sphinxxxx/color-conversion": "^2.2.2", "@stencil/core": "^1.14.0", "@stencil/sass": "^1.1.1", + "bootstrap-icons": "^1.0.0-alpha4", "color": "^3.1.2", - "feather-icons": "^4.28.0", "normalize.css": "^8.0.1", "resize-observer-polyfill": "^1.5.1", "tippy.js": "^5.2.1" diff --git a/postinstall.js b/postinstall.js index 630760d5f..ca18cf5ab 100644 --- a/postinstall.js +++ b/postinstall.js @@ -4,13 +4,12 @@ const del = require('del'); (async () => { try { - // Copy Feather Icons and license to src/components/icon/icons since local assets can't be linked from node_modules + // Copy Bootstrap Icons to src/components/icon/icons since local assets can't be linked from node_modules console.log(chalk.cyan('Copying icons 📦\n')); + await del('./src/components/icon/icons'); - await Promise.all([ - copy('./node_modules/feather-icons/dist/icons', './src/components/icon/icons', { overwrite: true }), - copy('./node_modules/feather-icons/LICENSE', './src/components/icon/icons/LICENSE', { overwrite: true }) - ]); + await copy('./node_modules/bootstrap-icons/icons', './src/components/icon/icons'); + await copy('./node_modules/bootstrap-icons/LICENSE.md', './src/components/icon/icons/LICENSE.md'); } catch (err) { console.error(err); } diff --git a/src/components.d.ts b/src/components.d.ts index 3ff37717f..655ff421c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -240,10 +240,6 @@ export namespace Components { * An external URL of an SVG file. */ "src": string; - /** - * Sets the stroke width in supported icons. - */ - "strokeWidth": string; } interface SlInput { /** @@ -1114,10 +1110,6 @@ declare namespace LocalJSX { * An external URL of an SVG file. */ "src"?: string; - /** - * Sets the stroke width in supported icons. - */ - "strokeWidth"?: string; } interface SlInput { /** diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx index d35786dac..6e3437708 100644 --- a/src/components/avatar/avatar.tsx +++ b/src/components/avatar/avatar.tsx @@ -49,7 +49,7 @@ export class Avatar { {!this.initials && (
- +
)} diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 26c90869d..3933f5855 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -117,7 +117,16 @@ export class Button { {this.caret && ( - + + + )} diff --git a/src/components/dropdown-item/dropdown-item.tsx b/src/components/dropdown-item/dropdown-item.tsx index 5850c05c2..c17190046 100644 --- a/src/components/dropdown-item/dropdown-item.tsx +++ b/src/components/dropdown-item/dropdown-item.tsx @@ -55,7 +55,7 @@ export class DropdownItem { > - + diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index 7d5047207..15c309adb 100644 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -27,9 +27,6 @@ export class Icon { /** An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. */ @Prop() label: string; - /** Sets the stroke width in supported icons. */ - @Prop() strokeWidth = '1.5'; - @Watch('name') @Watch('src') handleChange() { @@ -61,7 +58,6 @@ export class Icon { const svg = doc.body.querySelector('svg'); if (svg) { - svg.setAttribute('stroke-width', this.strokeWidth); this.svg = svg.outerHTML; } else { this.svg = ''; diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx index 661169427..012dfad7f 100644 --- a/src/components/input/input.tsx +++ b/src/components/input/input.tsx @@ -251,7 +251,7 @@ export class Input {