Cannot access SVG files through ToastUI CDN

[willowiscool]

Version

Latest

Development Environment

OpenSUSE Linux + Firefox

Current Behavior

I modified blackTheme to load the SVG files (icon-a through d) from the ToastUI CDN (URL: https://uicdn.toast.com/tui-image-editor/latest/svg/icon-a.svg). However, the icons are not loading correctly, and I get the error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://uicdn.toast.com/tui-image-editor/latest/svg/icon-d.svg. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

const blackTheme = {
        // ...
  	// main icons
	'menu.normalIcon.path': 'https://uicdn.toast.com/tui-image-editor/latest/svg/icon-d.svg',
	'menu.normalIcon.name': 'icon-d',
	'menu.activeIcon.path': 'https://uicdn.toast.com/tui-image-editor/latest/svg/icon-b.svg',
	'menu.activeIcon.name': 'icon-b',
	'menu.disabledIcon.path': 'https://uicdn.toast.com/tui-image-editor/latest/svg/icon-a.svg',
	'menu.disabledIcon.name': 'icon-a',
	'menu.hoverIcon.path': 'https://uicdn.toast.com/tui-image-editor/latest/svg/icon-c.svg',
	'menu.hoverIcon.name': 'icon-c',
	'menu.iconSize.width': '24px',
	'menu.iconSize.height': '24px',
        // ...
	// submenu icons
	'submenu.normalIcon.path': 'https://uicdn.toast.com/tui-image-editor/latest/svg/icon-d.svg',
	'submenu.normalIcon.name': 'icon-d',
	'submenu.activeIcon.path': 'https://uicdn.toast.com/tui-image-editor/latest/svg/icon-c.svg',
	'submenu.activeIcon.name': 'icon-c',
	'submenu.iconSize.width': '32px',
	'submenu.iconSize.height': '32px',
        // ...
}

Expected Behavior

Expected: no error, and icons load properly

[SebastianStehle]

This works for me: https://unpkg.com/[email protected]/dist/svg/icon-a.svg

[jinwoo-kim-nhn]

Currently, svg does not guarantee normal behavior in an external resource (cross domain) environment.

This part will be carefully improved after further testing.

[indfnzo]

Perhaps there could be a way to load this locally as well, so as to avoid the image editor from having to fetch the resources at runtime.

Imagine being able to just import the SVG's like so:

import { iconA, iconB, iconC, iconD } from 'tui-image-editor/dist/svg-icons.js';

...and using them on the config like so:

const theme = {
    // ...
    'menu.normalIcon': iconD,
    'menu.activeIcon': iconB,
    'menu.disabledIcon': iconA,
    'menu.hoverIcon': iconC,
    // ...
};

There could simply be an additional JS file (svg-icons.js) on the build where the SVG content is defined as a module:

const iconA = `
    <svg>
        <symbol id="icon-a-ic-apply" viewBox="0 0 24 24">
            <g fill="none" fill-rule="evenodd">
                <path d="M0 0h24v24H0z"/>
                <path stroke="#434343" d="M4 12.011l5 5L20.011 6"/>
            </g>
        </symbol>
        <symbol ...></symbol>
        <!-- other symbols -->
    </svg>
`;

export { iconA, ... };