Migration guide for @uploadcare/blocks v0.40.0

BREAKING CHANGES

  • Icons are moved from CSS custom properties to SVG sprites. Overriding icons is now done via the iconHrefResolver option.

How to migrate

Case 1. You were using default icons

If you were using the default icons, you don’t need to do anything.

Case 2. You were using custom icons with CSS custom properties

If you were using custom icons with CSS custom properties, you need to create an SVG sprite with your icons and use the iconHrefResolver option to replace the default icons with your custom ones.

For example, you have the following CSS custom property:

1.my-custom-icons {
2  --icon-upload: 'm11.5014.392135c.2844-.253315.7134-.253315.9978 0l6.7037 5.971925c.3093.27552.3366.74961.0611 1.05889-.2755.30929-.7496.33666-1.0589.06113l-5.4553-4.85982v13.43864c0 .4142-.3358.75-.75.75s-.75-.3358-.75-.75v-13.43771l-5.45427 4.85889c-.30929.27553-.78337.24816-1.0589-.06113-.27553-.30928-.24816-.78337.06113-1.05889zm-10.644466 16.336765c.414216 0 .749996.3358.749996.75v4.9139h20.78567v-4.9139c0-.4142.3358-.75.75-.75.4143 0 .75.3358.75.75v5.6639c0 .4143-.3357.75-.75.75h-22.285666c-.414214 0-.75-.3357-.75-.75v-5.6639c0-.4142.335786-.75.75-.75z';
3}

You need to create an SVG sprite with the my-custom-upload-icon ID:

1<svg>
2  <symbol
3    fill="none"
4    xmlns="http://www.w3.org/2000/svg"
5    viewBox="0 0 24 24"
6    id="my-custom-upload-icon"
7  >
8    <path
9      fill="currentColor"
10      fill-rule="evenodd"
11      d="m11.5014.392135c.2844-.253315.7134-.253315.9978 0l6.7037 5.971925c.3093.27552.3366.74961.0611 1.05889-.2755.30929-.7496.33666-1.0589.06113l-5.4553-4.85982v13.43864c0 .4142-.3358.75-.75.75s-.75-.3358-.75-.75v-13.43771l-5.45427 4.85889c-.30929.27553-.78337.24816-1.0589-.06113-.27553-.30928-.24816-.78337.06113-1.05889zm-10.644466 16.336765c.414216 0 .749996.3358.749996.75v4.9139h20.78567v-4.9139c0-.4142.3358-.75.75-.75.4143 0 .75.3358.75.75v5.6639c0 .4143-.3357.75-.75.75h-22.285666c-.414214 0-.75-.3357-.75-.75v-5.6639c0-.4142.335786-.75.75-.75z"
12    ></path>
13  </symbol>
14</svg>

Then, place it on your server as my-custom-icons.svg. Now you can use the iconHrefResolver option to replace the default upload icon with your custom one:

1const config = document.querySelector('lr-config');
2
3config.iconHrefResolver = (iconName) => {
4  if(iconName === 'upload') {
5    return './my-custom-icons.svg#my-custom-upload-icon';
6  }
7}

Now the File Uploader will use the custom icon for the upload button.

See the Styling icons article for more information.