Configuration

All settings for the blocks should be provided in CSS. It could be CSS-files or CSS rules defined somewhere in your project.

We recommend to use Shadow DOM mode enabled if you plan to use several solutions on one page at once. css-src attribute enables Shadow DOM and all provided styles start to work inside of it. This helps to avoid any possible collisions in styling and to control the scoping better.

Context

Each block plays its role in some context. Context helps to connect some blocks into one data flow if they placed somewhere in a host application. You can set a context manually to bind one block to another using ctx-name attribute:

<lr-file-uploader-regular ctx-name="MY_CONTEXT"></lr-file-uploader-regular>

Events

To get useful workflow data from the blocks you can use events. Block events are firing to the window scope, so you don't need to have a link or reference to the certain DOM-element. To define what exact workflow caused the event, use context name:

window.addEventListener('LR_DATA_OUTPUT', (e) => {
  if (e.detail.ctx === 'MY_CONTEXT') {
    // oh, now I know where it comes from...
    console.log(e.detail.data);
  }
});

You can find more event types on the file uploader's page.

Customization

With blocks you can customize everything:

Styles
Texts
Icons
Layouts

You can redefine styling or any other setting using custom CSS file. It's easy to discover proper elements and their selectors using developer tools in your browser.

Custom CSS-file example:

@import url('https://unpkg.com/@uploadcare/blocks@0.30.4/web/file-uploader-regular.min.css');

lr-modal {
  border: 2px solid #f00;
}

Then just connect it to the integrated solution:

<lr-file-uploader-regular css-src="./my-custom-styles.css"> </lr-file-uploader-regular>

For example, this is the list of pre-defined parameters used by default in our uploader builds:

:where(.lr-wgt-cfg, .lr-wgt-common),
:host {
  --cfg-pubkey: 'YOUR_PUBLIC_KEY';
  --cfg-multiple: 1;
  --cfg-multiple-min: 0;
  --cfg-multiple-max: 0;

  --cfg-confirm-upload: 1;
  --cfg-img-only: 0;
  --cfg-accept: '';
  --cfg-external-sources-preferred-types: '';
  --cfg-store: unset; /* unset variable means 'auto' */
  --cfg-camera-mirror: 1;
  --cfg-source-list: 'local, url, camera, dropbox, gdrive, facebook';
  --cfg-max-local-file-size-bytes: 0;
  --cfg-thumb-size: 76;
  --cfg-show-empty-list: 0;
  --cfg-use-local-image-editor: 0;
  --cfg-use-cloud-image-editor: 1;
  --cfg-remove-copyright: 0;

  --cfg-modal-scroll-lock: 1;
  --cfg-modal-backdrop-strokes: 0;

  --cfg-source-list-wrap: 1;

  --cfg-init-activity: 'start-from';
  --cfg-done-activity: '';

  --cfg-remote-tab-session-key: '';
  --cfg-cdn-cname: 'https://ucarecdn.com';
  --cfg-base-url: 'https://upload.uploadcare.com';
  --cfg-secure-signature: '';
  --cfg-secure-expire: '';
  --cfg-secure-delivery-proxy: '';
  --cfg-retry-throttled-request-max-times: 1;
  --cfg-multipart-min-file-size: 26214400; /* 25MB */
  --cfg-multipart-chunk-size: 5242880; /* 5MB */
  --cfg-max-concurrent-requests: 4;
  --cfg-multipart-max-attempts: 3;
  --cfg-check-for-url-duplicates: 0;
  --cfg-save-url-for-recurrent-uploads: 0;

  --cfg-group-output: 0;
}

As you can see, all properties are grouped for the set of selectors:

.lr-wgt-cfg — specific selector for the configuration section in common CSS.
.lr-wgt-common — common class for all types of settings and CSS data.
:host — Shadow DOM root element selector (used when Shadow DOM is enabled).

The variable value should be a correct JSON value. Strings should be taken in quotes. We use the 1 or 0 numbers to define boolean flags.

Any configuration value can be defined and redefined at any level of the DOM tree regarding CSS selector specificity.

Custom configurations

You can create your own custom parameters and values for your custom blocks:

.my-custom-config {
  --cfg-my-custom-property: 'SOME VALUE';
}

Then you can read it in a block:

import { BlockComponent } from 'blocks/BlockComponent/BlockComponent.js';

class MyBlock extends BlockComponent {
  initCallback() {
    let statePropName = this.bindCssData('--cfg-my-custom-property');
    // ^ this will return '*--cfg-my-custom-property'
    this.sub(statePropName, (val) => {
      console.log(val);
    });
  }
}

Dynamic configuration

via `style` property

We're handle style property updates automatically. It means that you can update your configuration in the following way:

let uploader = document.querySelector('lr-uploader');
uploader.style.setProperty('--cfg-source-list', 'local, url');

via `class` property

If you want to switch the whole configuration CSS class, you need to call method updateCssData() explicitly.

.config-1 {
  --cfg-source-list: 'local, url';
}
.config-2 {
  --cfg-source-list: 'local, camera';
}

<lr-uploader class="lr-wgt-common config-1"></lr-uploader>

let uploader = document.querySelector('lr-uploader');
uploader.classList.replace('config-1', 'config-2');
uploader.updateCssData();

Extended configuration using JS API

To set configuration properties with complex data types, you can use JS API on any block.

Name	Description
`setUploadMetadata(metadata: {})`	File Metadata. See docs

Example:

let uploader = document.querySelector('lr-uploader');
uploader.setUploadMetadata({ foo: 'bar' });

Icons

All icons are provided via the set of SVG path descriptions inside CSS:

.lr-wgt-icons,
.lr-wgt-common,
:host {
  --icon-default: 'm13 21.9506c5.0533-.5017 9-4.7653 9-9.9506 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.1853 3.94668 9.4489 9 9.9506v-11.5364l-2.79289 2.7929c-.39053.3906-1.02369.3906-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142l5.20711-5.20708 5.2071 5.20708c.3905.3905.3905 1.0237 0 1.4142-.3905.3906-1.0237.3906-1.4142 0l-2.7929-2.7929z';
  --icon-file: 'm13.3333 5.57143 4 3.85714h-4zm-6.66663-2.57143c-1.47266 0-2.66667 1.15121-2.66667 2.57143v12.85717c0 1.4202 1.19401 2.5714 2.66667 2.5714h10.66663c1.4727 0 2.6667-1.1512 2.6667-2.5714v-9.00003l-6.6667-6.42857z';
  --icon-close: 'M17.6569 7.75734c.3905-.39053.3905-1.02369 0-1.41421-.3906-.39053-1.0237-.39053-1.4143 0L12 10.5858 7.75736 6.34313c-.39053-.39053-1.02369-.39053-1.41421 0-.39053.39052-.39053 1.02368 0 1.41421L10.5858 12l-4.24266 4.2426c-.39052.3905-.39052 1.0237 0 1.4142.39053.3906 1.02369.3906 1.41422 0L12 13.4142l4.2426 4.2426c.3906.3906 1.0237.3906 1.4143 0 .3905-.3905.3905-1.0237 0-1.4142L13.4142 12l4.2427-4.24266Z';
  --icon-info: 'M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z';
  --icon-error: 'M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z';
  --icon-upload: 'm13 21.9506c5.0533-.5017 9-4.7653 9-9.9506 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.1853 3.94668 9.4489 9 9.9506v-11.5364l-2.79289 2.7929c-.39053.3906-1.02369.3906-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142l5.20711-5.20708 5.2071 5.20708c.3905.3905.3905 1.0237 0 1.4142-.3905.3906-1.0237.3906-1.4142 0l-2.7929-2.7929z';
  --icon-local: 'M2 10.0928C2 7.7191 2 6.53224 2.55634 5.66549C2.84743 5.21197 3.23952 4.8286 3.70334 4.54398C4.58979 4 5.80363 4 8.23131 4C9.21033 4 9.69984 4 10.1402 4.15191C10.374 4.23254 10.5954 4.34395 10.7983 4.48306C11.1807 4.74515 11.4652 5.13463 12.0343 5.91358L12.9091 7.11111H15.4091C18.1796 7.11111 19.5649 7.11111 20.5298 7.81082C20.8171 8.01913 21.0713 8.26774 21.2844 8.54862C22 9.49207 22 10.8466 22 13.5556C22 16.2645 22 17.619 21.2844 18.5625C21.0713 18.8434 20.8171 19.092 20.5298 19.3003C19.5649 20 18.1797 20 15.4091 20H9.27273C5.84433 20 4.13013 20 3.06507 18.9586C2 17.9172 2 16.2411 2 12.8889V10.0928Z';
  --icon-url: 'm15.069028 1.7437159c-1.839249 0-3.678387.7023305-5.0816705 2.105638l-1.0683184 1.0683191c-.5721674.572155-.5721674 1.5000856 0 2.0722529.5721673.5721673 1.4977379.5721673 2.0698679 0l1.070704-1.0683191c1.662305-1.6622801 4.356529-1.6622801 6.018834 0 1.662304 1.6622801 1.662304 4.3566512 0 6.0188332l-1.068319 1.070704c-.572131.572131-.572131 1.497737 0 2.069869.572131.57213 1.500121.57213 2.072253 0l1.068318-1.06832c2.806688-2.806565 2.806688-7.3567246 0-10.1633391-1.403282-1.4033075-3.24242-2.105638-5.081669-2.105638zm-.138309 5.8614473c-.37495 0-.751254.1431516-1.037319.4292353l-5.8590627 5.8590625c-.5721673.572253-.5721673 1.500123 0 2.072253.5721673.572131 1.5001344.572131 2.0722527 0l5.859063-5.859062c.572252-.5721679.572252-1.5000862 0-2.0722535-.286066-.2860837-.659984-.4292353-1.034934-.4292353zm-8.9757886.8847018c-.3749556 0-.7512351.1431516-1.0373187.4292353l-1.0683191 1.0683185c-2.8066147 2.8066882-2.8066148 7.3567742 0 10.1633392 2.8066147 2.806689 7.3567734 2.806689 10.1633404 0l1.068319-1.068319c.572251-.57213.572253-1.500121 0-2.072251-.572132-.572254-1.497739-.572254-2.069869 0l-1.070704 1.068318c-1.662305 1.662183-4.3565534 1.662183-6.0188335 0-1.6622801-1.662304-1.6622801-4.356529 0-6.018833l1.0683191-1.070704c.5721673-.572131.5721673-1.4977014 0-2.0698687-.2860836-.2860837-.6599786-.4292353-1.0349342-.4292353z';
  --icon-camera: 'm11 3c-.9428 0-1.4141313.0000788-1.7070312.2929688-.2714001.2714099-.2915088.6968024-.2929688 1.5078124-3.45256.0000701-5.18871.0076507-6.34375.9941407-.16547.14133-.3196175.2954675-.4609375.4609375-.99524 1.16527-.9960937 2.9216069-.9960937 6.4355466 0 3.5139.0008537 5.2722.9960937 6.4375.14132.1654.2954675.319538.4609375.460938 1.16527.9952 2.9216169.99414 6.4355469.99414h5.8164061c3.5139 0 5.270247.00106 6.435547-.99414.1654-.1414.319637-.295538.460938-.460938.9952-1.1653.996093-2.9236.996093-6.4375 0-3.5139397-.000893-5.2702766-.996093-6.4355466-.1413-.16547-.295538-.3196075-.460938-.4609375-1.1551-.98649-2.89125-.9940706-6.34375-.9941407-.0015-.8110099-.021569-1.2364025-.292969-1.5078124-.2929-.29289-.764231-.2929688-1.707031-.2929688zm1 5.1230469c2.5235 0 4.568359 2.0448591 4.568359 4.5683591s-2.044859 4.570313-4.568359 4.570313-4.5683594-2.046813-4.5683594-4.570313 2.0448594-4.5683591 4.5683594-4.5683591zm6.646484 0c.4588 0 .830078.3712581.830078.8300781 0 .45883-.371278.8320312-.830078.8320312-.4589 0-.832031-.3732012-.832031-.8320312 0-.45882.373131-.8300781.832031-.8300781z';
  --icon-dots: 'M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z';
  --icon-back: 'M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z';
  --icon-remove: 'm6.35673 9.71429c-.76333 0-1.35856.66121-1.27865 1.42031l1.01504 9.6429c.06888.6543.62067 1.1511 1.27865 1.1511h9.25643c.658 0 1.2098-.4968 1.2787-1.1511l1.015-9.6429c.0799-.7591-.5153-1.42031-1.2786-1.42031zm.50041-4.5v.32142h-2.57143c-.71008 0-1.28571.57564-1.28571 1.28572s.57563 1.28571 1.28571 1.28571h15.42859c.7101 0 1.2857-.57563 1.2857-1.28571s-.5756-1.28572-1.2857-1.28572h-2.5714v-.32142c0-1.77521-1.4391-3.21429-3.2143-3.21429h-3.8572c-1.77517 0-3.21426 1.43908-3.21426 3.21429zm7.07146-.64286c.355 0 .6428.28782.6428.64286v.32142h-5.14283v-.32142c0-.35504.28782-.64286.64283-.64286z';
  --icon-edit: 'M3.96371 14.4792c-.15098.151-.25578.3419-.3021.5504L2.52752 20.133c-.17826.8021.53735 1.5177 1.33951 1.3395l5.10341-1.1341c.20844-.0463.39934-.1511.55032-.3021l8.05064-8.0507-5.557-5.55702-8.05069 8.05062ZM13.4286 5.01437l5.557 5.55703 2.0212-2.02111c.6576-.65765.6576-1.72393 0-2.38159l-3.1755-3.17546c-.6577-.65765-1.7239-.65765-2.3816 0l-2.0211 2.02113Z';
  --icon-detail: 'M5,3C3.89,3 3,3.89 3,5V19C3,20.11 3.89,21 5,21H19C20.11,21 21,20.11 21,19V5C21,3.89 20.11,3 19,3H5M5,5H19V19H5V5M7,7V9H17V7H7M7,11V13H17V11H7M7,15V17H14V15H7Z';
  --icon-check: 'm12 22c5.5228 0 10-4.4772 10-10 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.5228 4.47715 10 10 10zm4.7071-11.4929-5.9071 5.9071-3.50711-3.5071c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.3906 1.02369-.3906 1.41422 0l2.09289 2.0929 4.4929-4.49294c.3905-.39052 1.0237-.39052 1.4142 0 .3905.39053.3905 1.02374 0 1.41424z';
  --icon-edit-file: 'M3.96371 14.4792c-.15098.151-.25578.3419-.3021.5504L2.52752 20.133c-.17826.8021.53735 1.5177 1.33951 1.3395l5.10341-1.1341c.20844-.0463.39934-.1511.55032-.3021l8.05064-8.0507-5.557-5.55702-8.05069 8.05062ZM13.4286 5.01437l5.557 5.55703 2.0212-2.02111c.6576-.65765.6576-1.72393 0-2.38159l-3.1755-3.17546c-.6577-.65765-1.7239-.65765-2.3816 0l-2.0211 2.02113Z';
  --icon-remove-file: 'm12 22c5.5228 0 10-4.4772 10-10 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.5228 4.47715 10 10 10zm3.7071-13.70711c.3905.39053.3905 1.02369 0 1.41422l-2.2929 2.29289 2.2929 2.2929c.3905.3905.3905 1.0237 0 1.4142s-1.0237.3905-1.4142 0l-2.2929-2.2929-2.29289 2.2929c-.39053.3905-1.02369.3905-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142l2.29291-2.2929-2.2929-2.29289c-.39053-.39053-.39053-1.02369 0-1.41422.39052-.39052 1.02369-.39052 1.41421 0l2.29289 2.29291 2.2929-2.29291c.3905-.39052 1.0237-.39052 1.4142 0z';
  --icon-trash-file: var(--icon-remove);
  --icon-upload-error: var(--icon-error);
  --icon-fullscreen: 'M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z';
  --icon-fullscreen-exit: 'M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z';
  --icon-badge-success: 'M10.5 18.2044L18.0992 10.0207C18.6629 9.41362 18.6277 8.46452 18.0207 7.90082C17.4136 7.33711 16.4645 7.37226 15.9008 7.97933L10.5 13.7956L8.0992 11.2101C7.53549 10.603 6.5864 10.5679 5.97933 11.1316C5.37226 11.6953 5.33711 12.6444 5.90082 13.2515L10.5 18.2044Z';
  --icon-badge-error: 'm13.6 18.4c0 .8837-.7164 1.6-1.6 1.6-.8837 0-1.6-.7163-1.6-1.6s.7163-1.6 1.6-1.6c.8836 0 1.6.7163 1.6 1.6zm-1.6-13.9c.8284 0 1.5.67157 1.5 1.5v7c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5v-7c0-.82843.6716-1.5 1.5-1.5z';

  --icon-edit-rotate: 'M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z';
  --icon-edit-flip-v: 'M3 15V17H5V15M15 19V21H17V19M19 3H5C3.9 3 3 3.9 3 5V9H5V5H19V9H21V5C21 3.9 20.1 3 19 3M21 19H19V21C20.1 21 21 20.1 21 19M1 11V13H23V11M7 19V21H9V19M19 15V17H21V15M11 19V21H13V19M3 19C3 20.1 3.9 21 5 21V19Z';
  --icon-edit-flip-h: 'M15 21H17V19H15M19 9H21V7H19M3 5V19C3 20.1 3.9 21 5 21H9V19H5V5H9V3H5C3.9 3 3 3.9 3 5M19 3V5H21C21 3.9 20.1 3 19 3M11 23H13V1H11M19 17H21V15H19M15 5H17V3H15M19 13H21V11H19M19 21C20.1 21 21 20.1 21 19H19Z';
  --icon-edit-brightness: 'M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z';
  --icon-edit-contrast: 'M12,20C9.79,20 7.79,19.1 6.34,17.66L17.66,6.34C19.1,7.79 20,9.79 20,12A8,8 0 0,1 12,20M6,8H8V6H9.5V8H11.5V9.5H9.5V11.5H8V9.5H6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16H17V14.5H12V16Z';
  --icon-edit-saturation: 'M3,13A9,9 0 0,0 12,22C12,17 7.97,13 3,13M12,5.5A2.5,2.5 0 0,1 14.5,8A2.5,2.5 0 0,1 12,10.5A2.5,2.5 0 0,1 9.5,8A2.5,2.5 0 0,1 12,5.5M5.6,10.25A2.5,2.5 0 0,0 8.1,12.75C8.63,12.75 9.12,12.58 9.5,12.31C9.5,12.37 9.5,12.43 9.5,12.5A2.5,2.5 0 0,0 12,15A2.5,2.5 0 0,0 14.5,12.5C14.5,12.43 14.5,12.37 14.5,12.31C14.88,12.58 15.37,12.75 15.9,12.75C17.28,12.75 18.4,11.63 18.4,10.25C18.4,9.25 17.81,8.4 16.97,8C17.81,7.6 18.4,6.74 18.4,5.75C18.4,4.37 17.28,3.25 15.9,3.25C15.37,3.25 14.88,3.41 14.5,3.69C14.5,3.63 14.5,3.56 14.5,3.5A2.5,2.5 0 0,0 12,1A2.5,2.5 0 0,0 9.5,3.5C9.5,3.56 9.5,3.63 9.5,3.69C9.12,3.41 8.63,3.25 8.1,3.25A2.5,2.5 0 0,0 5.6,5.75C5.6,6.74 6.19,7.6 7.03,8C6.19,8.4 5.6,9.25 5.6,10.25M12,22A9,9 0 0,0 21,13C16,13 12,17 12,22Z';
  --icon-edit-crop: 'M7,17V1H5V5H1V7H5V17A2,2 0 0,0 7,19H17V23H19V19H23V17M17,15H19V7C19,5.89 18.1,5 17,5H9V7H17V15Z';
  --icon-edit-text: 'M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z';
  --icon-edit-draw: 'm21.879394 2.1631238c-1.568367-1.62768627-4.136546-1.53831744-5.596267.1947479l-8.5642801 10.1674753c-1.4906533-.224626-3.061232.258204-4.2082427 1.448604-1.0665468 1.106968-1.0997707 2.464806-1.1203996 3.308068-.00142.05753-.00277.113001-.00439.16549-.02754.894146-.08585 1.463274-.5821351 2.069648l-.80575206.98457.88010766.913285c1.0539516 1.093903 2.6691689 1.587048 4.1744915 1.587048 1.5279113 0 3.2235468-.50598 4.4466094-1.775229 1.147079-1.190514 1.612375-2.820653 1.395772-4.367818l9.796763-8.8879697c1.669907-1.5149954 1.75609-4.1802333.187723-5.8079195zm-16.4593821 13.7924592c.8752943-.908358 2.2944227-.908358 3.1697054 0 .8752942.908358.8752942 2.381259 0 3.289617-.5909138.61325-1.5255389.954428-2.53719.954428-.5223687 0-.9935663-.09031-1.3832112-.232762.3631253-.915463.3952949-1.77626.4154309-2.429737.032192-1.045425.072224-1.308557.3352649-1.581546z';
  --icon-edit-guides: 'M1.39,18.36L3.16,16.6L4.58,18L5.64,16.95L4.22,15.54L5.64,14.12L8.11,16.6L9.17,15.54L6.7,13.06L8.11,11.65L9.53,13.06L10.59,12L9.17,10.59L10.59,9.17L13.06,11.65L14.12,10.59L11.65,8.11L13.06,6.7L14.47,8.11L15.54,7.05L14.12,5.64L15.54,4.22L18,6.7L19.07,5.64L16.6,3.16L18.36,1.39L22.61,5.64L5.64,22.61L1.39,18.36Z';
  --icon-edit-color: 'M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z';
  --icon-edit-resize: 'M10.59,12L14.59,8H11V6H18V13H16V9.41L12,13.41V16H20V4H8V12H10.59M22,2V18H12V22H2V12H6V2H22M10,14H4V20H10V14Z';

  --icon-external-source-placeholder: 'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z';
  --icon-facebook: 'M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z';
  --icon-dropbox: 'm6.0344426 1.9570014-5.96360421 3.7989306 5.96360421 3.7989309 5.9636044-3.7989309zm5.9636044 3.7989306 5.963604 3.7989309 5.963605-3.7989309-5.963605-3.7989306zm5.963604 3.7989309-5.963604 3.7989311 5.963604 3.798929 5.963605-3.798929zm-5.963604 3.7989311-5.9636044-3.7989311-5.96360421 3.7989311 5.96360421 3.798929zm.0024 1.204188-5.9636041 3.80132 5.9636041 3.798931 5.963604-3.798931z';
  --icon-gdrive: 'M7.71,3.5L1.15,15L4.58,21L11.13,9.5M9.73,15L6.3,21H19.42L22.85,15M22.28,14L15.42,2H8.58L8.57,2L15.43,14H22.28Z';
  --icon-gphotos: 'M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z';
  --icon-instagram: 'm 16.6963,8.35462 c 0.5834,0 1.0564,-0.47293 1.0564,-1.05632 0,-0.58339 -0.473,-1.05632 -1.0564,-1.05632 -0.5833,0 -1.0563,0.47293 -1.0563,1.05632 0,0.58339 0.473,1.05632 1.0563,1.05632 z m -4.699,-0.87741 c -0.8941,0 -1.7681,0.26513 -2.51154,0.76187 -0.74341,0.49674 -1.32282,1.20277 -1.66495,2.02882 -0.34214,0.826 -0.43164,1.735 -0.25719,2.6119 0.17446,0.8769 0.60503,1.6824 1.23727,2.3146 0.63224,0.6322 1.43771,1.0627 2.31471,1.2371 0.8769,0.1743 1.7858,0.0848 2.6118,-0.2574 0.826,-0.3422 1.532,-0.9217 2.0287,-1.6651 0.4967,-0.7435 0.7618,-1.6175 0.7617,-2.5116 0,-0.5937 -0.1169,-1.1815 -0.344,-1.7299 C 15.9466,9.719 15.6136,9.22066 15.1938,8.80091 14.7741,8.38116 14.2757,8.04822 13.7272,7.82109 13.1787,7.59397 12.5909,7.47712 11.9973,7.47721 Z m 0,7.45429 c -0.5806,0 -1.148,-0.1721 -1.6307,-0.4946 C 9.88388,14.1143 9.50767,13.6559 9.28551,13.1196 9.06335,12.5833 9.00523,11.9931 9.11848,11.4237 9.23174,10.8543 9.51128,10.3313 9.92178,9.92085 10.3323,9.51036 10.8553,9.23081 11.4246,9.11756 11.994,9.0043 12.5842,9.06243 13.1205,9.28459 c 0.5363,0.22215 0.9948,0.59836 1.3173,1.08101 0.3225,0.4827 0.4946,1.0502 0.4946,1.6307 0,0.7785 -0.3092,1.5251 -0.8597,2.0755 -0.5504,0.5505 -1.297,0.8597 -2.0754,0.8597 z m 0,-10.15082 c 2.3506,0 2.6287,0.00909 3.5571,0.05137 0.8582,0.03913 1.3243,0.1824 1.6346,0.30295 0.3828,0.14096 0.7291,0.36604 1.0134,0.65867 0.2926,0.28423 0.5177,0.63052 0.6586,1.01334 0.1206,0.31029 0.2639,0.77642 0.303,1.63461 0.0423,0.92843 0.0514,1.20657 0.0514,3.55718 0,2.3506 -0.0091,2.6287 -0.0514,3.5572 -0.0391,0.8581 -0.1824,1.3243 -0.303,1.6346 -0.1466,0.3795 -0.3709,0.7242 -0.6586,1.0119 -0.2877,0.2877 -0.6324,0.5121 -1.012,0.6587 -0.3103,0.1205 -0.7764,0.2638 -1.6346,0.3029 -0.9281,0.0423 -1.2066,0.0514 -3.5571,0.0514 -2.35063,0 -2.62912,-0.0091 -3.5572,-0.0514 C 7.58331,19.125 7.11718,18.9817 6.80689,18.8612 6.42407,18.7202 6.07778,18.4951 5.79355,18.2025 5.50093,17.9183 5.27584,17.572 5.13488,17.1892 5.01433,16.8789 4.87107,16.4127 4.83193,15.5546 4.78965,14.6261 4.78056,14.348 4.78056,11.9974 4.78056,9.6468 4.78965,9.36865 4.83193,8.44023 4.87107,7.58203 5.01433,7.1159 5.13488,6.80561 5.27584,6.42279 5.50093,6.0765 5.79355,5.79227 6.07778,5.49965 6.42407,5.27456 6.80689,5.1336 7.11718,5.01305 7.58331,4.86979 8.4415,4.83065 9.36993,4.78837 9.64807,4.77928 11.9987,4.77928 Z m 0.0014,-1.58744 c -2.39081,0 -2.69062,0.01013 -3.62953,0.05311 C 7.43026,3.28933 6.79116,3.43923 6.23103,3.65693 5.64371,3.87792 5.11163,4.22433 4.67189,4.67201 4.22484,5.11192 3.87904,5.64398 3.65856,6.23115 3.43912,6.79128 3.29026,7.43108 3.24763,8.3679 3.205,9.30471 3.19452,9.60661 3.19452,11.9974 c 0,2.3908 0.01013,2.6906 0.05311,3.6295 0.04298,0.9389 0.19149,1.5766 0.40918,2.1367 0.22099,0.5874 0.5674,1.1194 1.01508,1.5592 0.43982,0.4476 0.97187,0.7941 1.55914,1.0154 0.55908,0.2173 1.19993,0.3662 2.13674,0.4092 0.93681,0.043 1.23872,0.0527 3.62953,0.0527 2.3907,0 2.6905,-0.0101 3.6295,-0.0527 0.9389,-0.0426 1.5766,-0.1919 2.1367,-0.4092 0.5847,-0.2262 1.1158,-0.5721 1.5591,-1.0154 0.4434,-0.4434 0.7892,-0.9744 1.0155,-1.5592 0.2173,-0.5591 0.3662,-1.1999 0.4091,-2.1367 C 20.7902,14.6901 20.8,14.3882 20.8,11.9974 20.8,9.60661 20.7899,9.3068 20.7472,8.3679 20.7046,7.42899 20.5554,6.79128 20.3381,6.23115 20.1168,5.64388 19.7703,5.11183 19.3226,4.67201 18.8827,4.22496 18.3507,3.87916 17.7635,3.65867 17.2034,3.43923 16.5636,3.29038 15.6268,3.24775 14.6899,3.20512 14.388,3.19464 11.9973,3.19464 Z';
  --icon-flickr: var(--icon-external-source-placeholder);
  --icon-vk: var(--icon-external-source-placeholder);
  --icon-evernote: var(--icon-external-source-placeholder);
  --icon-box: var(--icon-external-source-placeholder);
  --icon-onedrive: var(--icon-external-source-placeholder);
  --icon-huddle: var(--icon-external-source-placeholder);
}

You can change any of their values to customize your icons.

To display the certain icon, use lr-icon component and the name attribute:

<lr-icon name="detail"></lr-icon>

This will take --icon-detail CSS value and you will get this as the result:

<lr-icon name="detail">
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M5,3C3.89,3 3,3.89 3,5V19C3,20.11 3.89,21 5,21H19C20.11,21 21,20.11 21,19V5C21,3.89 20.11,3 19,3H5M5,5H19V19H5V5M7,7V9H17V7H7M7,11V13H17V11H7M7,15V17H14V15H7Z"
    ></path>
  </svg>
</lr-icon>