diff --git a/jest.config.js b/jest.config.js index 575b844b07b..a91a8888b25 100644 --- a/jest.config.js +++ b/jest.config.js @@ -15,7 +15,10 @@ module.exports = { setupFiles: ['jest-canvas-mock', './public/test/jest-shim.ts', './public/test/jest-setup.ts'], setupFilesAfterEnv: ['./public/test/setupTests.ts'], snapshotSerializers: ['enzyme-to-json/serializer'], - globals: { 'ts-jest': { isolatedModules: true } }, + globals: { + 'ts-jest': { isolatedModules: true }, + __webpack_public_path__: '', // empty string + }, moduleNameMapper: { '\\.svg': '/public/test/mocks/svg.ts', '\\.css': '/public/test/mocks/style.ts', diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx index 3324eb616cc..add0a106476 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.tsx +++ b/packages/grafana-ui/src/components/Icon/Icon.tsx @@ -6,7 +6,10 @@ import { useTheme } from '../../themes/ThemeContext'; import { IconName, IconType, IconSize } from '../../types/icon'; import SVG from '@leeoniya/react-inlinesvg'; -const iconRoot = '/public/img/icons/'; +declare let __webpack_public_path__: string; + +// Lazy load the root url +let iconRoot: string | undefined = undefined; const alwaysMonoIcons: IconName[] = ['grafana', 'favorite', 'heart-break', 'heart', 'panel-add', 'reusable-panel']; export interface IconProps extends React.HTMLAttributes { @@ -56,6 +59,19 @@ export const Icon = React.forwardRef( size = 'xl'; } + // Lazy load -- this will give time the the CDN path to be injected on app init + if (!iconRoot) { + if (__webpack_public_path__) { + const publicpath = // __webpack_public_path__ includes the 'build/' suffix + __webpack_public_path__.substring(0, __webpack_public_path__.lastIndexOf('build/')) || + __webpack_public_path__; + + iconRoot = publicpath + 'img/icons/'; + } else { + iconRoot = '/public/img/icons/'; // will only happen for non-grafana builds + } + } + const styles = getIconStyles(theme); const svgSize = getSvgSize(size); const svgHgt = svgSize;