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

make imports consistent

Browse Source
This commit is contained in:
Cory LaViska
2021-06-09 08:48:26 -04:00
parent 714914ffe5
commit 529c187bc4
2 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/components/icon.md
View File

@@ -76,7 +76,7 @@ Here's an example that registers an icon library located in the `/assets/icons`
```html
<script type="module">
import { registerIconLibrary } from '/shoelace/dist/utilities/icon-library.js';
import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
registerIconLibrary('my-icons', {
resolver: name => `/assets/icons/${name}.svg`,
@@ -104,7 +104,7 @@ Icons in this library are licensed under the [Creative Commons 4.0 License](http
```html preview
<script type="module">
import { registerIconLibrary } from '/dist/shoelace.js';
import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
registerIconLibrary('boxicons', {
resolver: name => {
@@ -158,7 +158,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/fe
</div>
<script type="module">
import { registerIconLibrary } from '/dist/shoelace.js';
import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
registerIconLibrary('feather', {
resolver: name => `https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/icons/${name}.svg`
@@ -174,7 +174,7 @@ Icons in this library are licensed under the [Font Awesome Free License](https:/
```html preview
<script type="module">
import { registerIconLibrary } from '/dist/shoelace.js';
import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
registerIconLibrary('fa', {
resolver: name => {
@@ -220,7 +220,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/ta
```html preview
<script type="module">
import { registerIconLibrary } from '/dist/shoelace.js';
import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
registerIconLibrary('heroicons', {
resolver: name => `https://cdn.jsdelivr.net/npm/heroicons@0.4.2/outline/${name}.svg`
@@ -245,7 +245,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/lu
```html preview
<script type="module">
import { registerIconLibrary } from '/dist/shoelace.js';
import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
registerIconLibrary('iconoir', {
resolver: name => `https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@latest/icons/${name}.svg`
@@ -270,7 +270,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/io
```html preview
<script type="module">
import { registerIconLibrary } from '/dist/shoelace.js';
import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
registerIconLibrary('ionicons', {
resolver: name => `https://cdn.jsdelivr.net/npm/ionicons@5.1.2/dist/ionicons/svg/${name}.svg`,
@@ -315,7 +315,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/mi
```html preview
<script type="module">
import { registerIconLibrary } from '/dist/shoelace.js';
import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
registerIconLibrary('jam', {
resolver: name => `https://cdn.jsdelivr.net/npm/jam-icons@2.0.0/svg/${name}.svg`,
@@ -348,7 +348,7 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
```html preview
<script type="module">
import { registerIconLibrary } from '/dist/shoelace.js';
import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
registerIconLibrary('material', {
resolver: name => {
@@ -391,7 +391,7 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
```html preview
<script type="module">
import { registerIconLibrary } from '/dist/shoelace.js';
import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
registerIconLibrary('remixicon', {
resolver: name => {
@@ -428,7 +428,7 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
```html preview
<script type="module">
import { registerIconLibrary } from '/dist/shoelace.js';
import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
registerIconLibrary('unicons', {
resolver: name => {
@@ -464,7 +464,7 @@ This example will load the same set of icons from the jsDelivr CDN instead of yo
```html
<script type="module">
import { registerIconLibrary } from '/shoelace/dist/utilities/icon-library.js';
import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
registerIconLibrary('default', {
resolver: name => `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.0.0/icons/${name}.svg`
@@ -480,7 +480,7 @@ If you want to change the icons Shoelace uses internally, you can register an ic
```html
<script type="module">
import { registerIconLibrary } from '/shoelace/dist/utilities/icon-library.js';
import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
registerIconLibrary('system', {
resolver: name => `/path/to/custom/icons/${name}.svg`

10
docs/getting-started/installation.md
View File

@@ -30,6 +30,8 @@ Once you've done that, add the following tags to your page. Make sure to update
<script type="module" src="/scripts/shoelace/dist/shoelace.js"></script>
```
?> For clarity, the docs will usually show imports from `@shoelace-style/shoelace`. If you're not using a module resolver or bundler, you'll need to adjust these paths to point to the folder Shoelace is in.
## Setting the Base Path
Some components rely on assets (icons, images, etc.) and Shoelace needs to know where they're located. For convenience, Shoelace will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `shoelace.js` and will "just work" for most users.
@@ -56,15 +58,15 @@ The previous approach is the _easiest_ way to load Shoelace, but easy isn't alwa
Cherry picking can be done from your local install or [directly from the CDN](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/). This will limit the number of files the browser has to download and reduce the amount of bytes being transferred. The disadvantage is that you need to load and register each component manually, including its dependencies.
Here's an example that loads only the button component and its dependencies. Again, we're assuming you're serving Shoelace's `dist` directory from `/scripts/shoelace`.
Here's an example that loads only the button component and its dependencies. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Shoelace is in.
```html
<!-- The base stylesheet is always required -->
<link rel="stylesheet" href="/scripts/shoelace/dist/themes/base.css">
<link rel="stylesheet" href="@shoelace-style/shoelace/dist/themes/base.css">
<script type="module" data-shoelace="/scripts/shoelace">
import SlButton from '/scripts/shoelace/dist/components/button/button.js';
import SlSpinner from '/scripts/shoelace/dist/components/spinner/spinner.js';
import SlButton from '@shoelace-style/shoelace/dist/components/button/button.js';
import SlSpinner from '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
// <sl-button> and <sl-spinner> are ready to use!
</script>