js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Switch to feather icons and improve icons

Browse Source
This commit is contained in:
Cory LaViska
2020-04-07 22:30:30 -04:00
parent 6beddd2746
commit 237143ac0f
16 changed files with 126 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/scripts/code-block-plugin.js
View File

@@ -62,7 +62,7 @@
toggle.classList.add('code-block__toggle');
toggle.setAttribute('aria-expanded', 'false');
toggle.setAttribute('aria-controls', preId);
toggle.innerHTML = '<sl-icon name="chevron-down" style="font-size: 12px;"></sl-icon>';
toggle.innerHTML = '<sl-icon name="chevron-down"></sl-icon>';
codeBlock.prepend(preview);
codeBlock.append(toggle);

2
docs/assets/styles/docs.css
View File

@@ -263,7 +263,7 @@ body.close .sidebar-toggle:focus {
align-items: center;
justify-content: center;
position: absolute;
color: var(--sl-color-gray-70);
color: var(--sl-color-gray-60);
top: 0;
right: 0;
bottom: 0;

2
docs/home.md
View File

@@ -66,7 +66,7 @@ Although Web Components can (to some degree) be polyfilled for older browsers, s
- Components are compiled by [Stencil](https://stenciljs.com/)
- Theme colors and form controls are inspired by [Element](element.eleme.io)
- Icons are courtesy of [Bootstrap Icons](https://icons.getbootstrap.com/)
- Icons are courtesy of [Feather Icons](https://feathericons.com/)
- Positioning of menus, popovers, etc. is handled by [Popper.js](https://popper.js.org/)
- Tooltips are powered by [Tippy.js](https://atomiks.github.io/tippyjs/)
- Documentation is powered by [Docsify](https://docsify.js.org/)

26
package-lock.json generated
View File

@@ -559,11 +559,6 @@
"file-uri-to-path": "1.0.0"
}
},
"bootstrap-icons": {
"version": "1.0.0-alpha3",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.0.0-alpha3.tgz",
"integrity": "sha512-UO++43jb/qlWVsC31WkHOjFsTihJkSz0wngnUS+P1ImcCMTqDJqDHySld+hpkzxi+q6fL8iom7nfT3ApAxZ6cQ=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -706,6 +701,11 @@
}
}
},
"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",
@@ -1561,6 +1561,22 @@
"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=="
}
}
},
"file-uri-to-path": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",

2
package.json
View File

@@ -40,7 +40,7 @@
"@popperjs/core": "^2.1.1",
"@stencil/core": "^1.12.1",
"@stencil/sass": "^1.1.1",
"bootstrap-icons": "^1.0.0-alpha3",
"feather-icons": "^4.28.0",
"normalize.css": "^8.0.1",
"resize-observer-polyfill": "^1.5.1",
"tippy.js": "^5.1.3"

17
postinstall.js
View File

@@ -1,6 +1,15 @@
const copy = require('recursive-copy');
const del = require('del');
Promise.all([
copy('./node_modules/bootstrap-icons/icons', './src/components/icon/icons', { overwrite: true }),
copy('./node_modules/bootstrap-icons/LICENSE.md', './src/components/icon/icons/LICENSE.md', { overwrite: true })
]).catch(err => console.error(err));
(async () => {
try {
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 })
]);
} catch (err) {
console.error(err);
}
})();

8
src/components.d.ts vendored
View File

@@ -137,6 +137,10 @@ export namespace Components {
* An external URL of the SVG file to fetch.
*/
"src": string;
/**
* An alternative description to use for accessibility. If omitted, the name or src will be used to generate it.
*/
"strokeWidth": string;
}
interface SlInput {
/**
@@ -804,6 +808,10 @@ declare namespace LocalJSX {
* An external URL of the SVG file to fetch.
*/
"src"?: string;
/**
* An alternative description to use for accessibility. If omitted, the name or src will be used to generate it.
*/
"strokeWidth"?: string;
}
interface SlInput {
/**

8
src/components/alert/readme.md
View File

@@ -25,7 +25,7 @@
```html preview
<sl-alert type="primary">
<sl-icon slot="icon" name="info-circle" style="font-size: 20px;"></sl-icon>
<sl-icon slot="icon" name="info" style="font-size: 20px;"></sl-icon>
<strong>Your changes have been saved</strong><br>
You can continue working or safely leave the app now.
</sl-alert><br>
@@ -37,19 +37,19 @@
</sl-alert><br>
<sl-alert type="info">
<sl-icon slot="icon" name="gear" style="font-size: 20px;"></sl-icon>
<sl-icon slot="icon" name="settings" style="font-size: 20px;"></sl-icon>
<strong>Your changes have been saved</strong><br>
You can continue working or safely leave the app now.
</sl-alert><br>
<sl-alert type="warning">
<sl-icon slot="icon" name="exclamation-triangle" style="font-size: 20px;"></sl-icon>
<sl-icon slot="icon" name="alert-triangle" style="font-size: 20px;"></sl-icon>
<strong>Your changes have been saved</strong><br>
You can continue working or safely leave the app now.
</sl-alert><br>
<sl-alert type="danger">
<sl-icon slot="icon" name="exclamation-octagon" style="font-size: 20px;"></sl-icon>
<sl-icon slot="icon" name="alert-octagon" style="font-size: 20px;"></sl-icon>
<strong>Your changes have been saved</strong><br>
You can continue working or safely leave the app now.
</sl-alert>

2
src/components/button/button.scss
View File

@@ -17,7 +17,7 @@
border-style: solid;
border-width: var(--sl-form-control-border-width);
font-family: var(--sl-form-control-font-sans-serif);
font-weight: var(--sl-font-weight-normal);
font-weight: var(--sl-font-weight-semibold);
user-select: none;
white-space: nowrap;
vertical-align: middle;

9
src/components/button/button.tsx
View File

@@ -92,14 +92,7 @@ export class Button {
</span>
{this.caret && (
<span class="sl-button__caret">
<svg viewBox="0 0 16 16">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M4,6.28571429 L7.98653436,10.2722486"></path>
<path d="M12,6.28571429 L8,10.2857143"></path>
</g>
</g>
</svg>
<sl-icon name="chevron-down" />
</span>
)}

27
src/components/button/readme.md
View File

@@ -39,9 +39,9 @@ Use the `size` prop to change a button's size.
Use the `circle` prop to create circular icon buttons.
```html preview
<sl-button type="default" size="small" circle><sl-icon name="gear"></sl-icon></sl-button>
<sl-button type="default" size="medium" circle><sl-icon name="gear"></sl-icon></sl-button>
<sl-button type="default" size="large" circle><sl-icon name="gear"></sl-icon></sl-button>
<sl-button type="default" size="small" circle><sl-icon name="settings"></sl-icon></sl-button>
<sl-button type="default" size="medium" circle><sl-icon name="settings"></sl-icon></sl-button>
<sl-button type="default" size="large" circle><sl-icon name="settings"></sl-icon></sl-button>
```
## Text
@@ -70,16 +70,16 @@ Use the `prefix` and `suffix` slots to add icons.
```html preview
<sl-button type="default">
<sl-icon slot="prefix" name="gear"></sl-icon>
<sl-icon slot="prefix" name="settings"></sl-icon>
Settings
</sl-button>
<sl-button type="default">
<sl-icon slot="suffix" name="arrow-clockwise"></sl-icon>
<sl-icon slot="suffix" name="refresh-ccw"></sl-icon>
Refresh
</sl-button>
<sl-button type="default">
<sl-icon slot="prefix" name="link-45deg"></sl-icon>
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
<sl-icon slot="prefix" name="link"></sl-icon>
<sl-icon slot="suffix" name="external-link"></sl-icon>
Open
</sl-button>
```
@@ -170,6 +170,19 @@ Type: `Promise<void>`
| `"suffix"` | Used to append an icon or similar element to the button. |
## Dependencies
### Depends on
- [sl-icon](../icon)
### Graph
```mermaid
graph TD;
sl-button --> sl-icon
style sl-button fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------

19
src/components/icon/icon.tsx
View File

@@ -2,6 +2,8 @@ import { Component, Prop, State, Watch, getAssetPath, h } from '@stencil/core';
import { requestIcon } from './request';
const parser = new DOMParser();
@Component({
tag: 'sl-icon',
styleUrl: 'icon.scss',
@@ -20,6 +22,9 @@ 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;
/** An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. */
@Prop() strokeWidth = '2';
@Watch('name')
@Watch('src')
handleChange() {
@@ -46,10 +51,20 @@ export class Icon {
setIcon() {
const url = this.name ? getAssetPath(`./icons/${this.name}.svg`) : this.src;
requestIcon(url).then(svg => (this.svg = svg));
requestIcon(url).then(source => {
const doc = parser.parseFromString(source, 'text/html');
const svg = doc.body.querySelector('svg');
if (svg) {
svg.setAttribute('stroke-width', this.strokeWidth);
this.svg = svg.outerHTML;
} else {
this.svg = '';
}
});
}
render() {
return <div class="sl-icon" role="img" aria-label={this.getLabel()} innerHTML={this.svg || ''} />;
return <div class="sl-icon" role="img" aria-label={this.getLabel()} innerHTML={this.svg} />;
}
}

48
src/components/icon/readme.md
View File

@@ -1,33 +1,37 @@
# Icon
<sl-icon name="alarm"></sl-icon>
<sl-icon name="archive"></sl-icon>
<sl-icon name="battery"></sl-icon>
<sl-icon name="bell"></sl-icon>
<sl-icon name="clock"></sl-icon>
<sl-icon name="chevron-down"></sl-icon>
<sl-icon name="download"></sl-icon>
<sl-icon name="exclamation-triangle"></sl-icon>
<sl-icon name="file-earmark"></sl-icon>
<sl-icon name="flag"></sl-icon>
<sl-icon name="image"></sl-icon>
<sl-icon name="mic"></sl-icon>
<sl-icon name="search"></sl-icon>
<sl-icon name="trash"></sl-icon>
<sl-icon name="x-circle"></sl-icon>
```html preview
<div style="font-size: 1.5rem;">
<sl-icon name="alert-triangle"></sl-icon>
<sl-icon name="archive"></sl-icon>
<sl-icon name="battery"></sl-icon>
<sl-icon name="bell"></sl-icon>
<sl-icon name="clock"></sl-icon>
<sl-icon name="chevron-down"></sl-icon>
<sl-icon name="download"></sl-icon>
<sl-icon name="file"></sl-icon>
<sl-icon name="flag"></sl-icon>
<sl-icon name="image"></sl-icon>
<sl-icon name="mic"></sl-icon>
<sl-icon name="search"></sl-icon>
<sl-icon name="trash"></sl-icon>
<sl-icon name="x-circle"></sl-icon>
</div>
```
<sl-icon src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg" style="width: 100px; height: 100px;"></sl-icon>
Icons are courtesy of [Feather Icons](https://feathericons.com/).
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
| `label` | `label` | An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. | `string` | `undefined` |
| `name` | `name` | The name of the icon to draw. | `string` | `undefined` |
| `src` | `src` | An external URL of the SVG file to fetch. | `string` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | ------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
| `label` | `label` | An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. | `string` | `undefined` |
| `name` | `name` | The name of the icon to draw. | `string` | `undefined` |
| `src` | `src` | An external URL of the SVG file to fetch. | `string` | `undefined` |
| `strokeWidth` | `stroke-width` | An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. | `string` | `'2'` |
## Dependencies
@@ -35,6 +39,7 @@
### Used by
- [sl-alert](../alert)
- [sl-button](../button)
- [sl-dropdown-item](../dropdown-item)
- [sl-input](../input)
@@ -42,6 +47,7 @@
```mermaid
graph TD;
sl-alert --> sl-icon
sl-button --> sl-icon
sl-dropdown-item --> sl-icon
sl-input --> sl-icon
style sl-icon fill:#f9f,stroke:#333,stroke-width:4px

4
src/components/input/input.tsx
View File

@@ -191,12 +191,12 @@ export class Input {
>
{this.isPasswordVisible ? (
<slot name="show-password-icon">
<sl-icon name="eye" />
<sl-icon name="eye-off" />
</slot>
) : (
<slot name="hide-password-icon">
{' '}
<sl-icon name="eye-slash" />
<sl-icon name="eye" />
</slot>
)}
</button>

12
src/components/input/readme.md
View File

@@ -15,21 +15,21 @@
<sl-input type="text" placeholder="Small" size="small">
<sl-icon name="tag" slot="prefix"></sl-icon>
<sl-icon name="gear" slot="suffix"></sl-icon>
<sl-icon name="settings" slot="suffix"></sl-icon>
</sl-input>
<br><br>
<sl-input type="text" placeholder="Medium" size="medium">
<sl-icon name="tag" slot="prefix"></sl-icon>
<sl-icon name="gear" slot="suffix"></sl-icon>
<sl-icon name="settings" slot="suffix"></sl-icon>
</sl-input>
<br><br>
<sl-input type="text" placeholder="Large" size="large">
<sl-icon name="tag" slot="prefix"></sl-icon>
<sl-icon name="gear" slot="suffix"></sl-icon>
<sl-icon name="settings" slot="suffix"></sl-icon>
</sl-input>
<br><br>
@@ -59,7 +59,7 @@
<span slot="before">$</span>
<span slot="after">.00</span>
<sl-icon name="tag" slot="prefix"></sl-icon>
<sl-icon name="gear" slot="suffix"></sl-icon>
<sl-icon name="settings" slot="suffix"></sl-icon>
</sl-input>
<br><br>
@@ -68,7 +68,7 @@
<span slot="before">$</span>
<span slot="after">.00</span>
<sl-icon name="tag" slot="prefix"></sl-icon>
<sl-icon name="gear" slot="suffix"></sl-icon>
<sl-icon name="settings" slot="suffix"></sl-icon>
</sl-input>
<br><br>
@@ -77,7 +77,7 @@
<span slot="before">$</span>
<span slot="after">.00</span>
<sl-icon name="tag" slot="prefix"></sl-icon>
<sl-icon name="gear" slot="suffix"></sl-icon>
<sl-icon name="settings" slot="suffix"></sl-icon>
</sl-input>
<br><br>

3
src/styles/mixins/button.scss
View File

@@ -16,7 +16,8 @@
background-color: $background-color;
border-color: $border-color;
color: $color;
s &:hover:not(:disabled) {
&:hover:not(:disabled) {
background-color: $background-color--hover;
border-color: $border-color--hover;
color: $color--hover;