diff --git a/package.json b/package.json index ecc77c15b6d..fbef23de3b4 100644 --- a/package.json +++ b/package.json @@ -154,12 +154,14 @@ "expose-loader": "0.7.5", "file-loader": "5.0.2", "fork-ts-checker-webpack-plugin": "6.1.1", + "fs-extra": "9.1.0", "gaze": "1.1.3", "glob": "7.1.6", "html-loader": "0.5.5", "html-webpack-harddisk-plugin": "1.0.1", "html-webpack-plugin": "3.2.0", "husky": "4.2.1", + "iconscout-unicons-tarball": "https://github.com/grafana/icons/tarball/14e6856f7ce5a44d3e722b40c225482663cbfd66", "jest": "26.6.3", "jest-canvas-mock": "2.3.0", "jest-date-mock": "1.0.8", @@ -178,6 +180,7 @@ "postcss-loader": "3.0.0", "postcss-reporter": "6.0.1", "prettier": "2.2.1", + "raw-loader": "4.0.2", "react-hot-loader": "4.8.0", "react-select-event": "^5.1.0", "react-test-renderer": "16.12.0", @@ -209,6 +212,7 @@ "@emotion/react": "11.1.5", "@grafana/aws-sdk": "0.0.3", "@grafana/slate-react": "0.22.9-grafana", + "@leeoniya/react-inlinesvg": "2.2.4", "@popperjs/core": "2.5.4", "@reduxjs/toolkit": "1.5.0", "@sentry/browser": "5.25.0", diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 170be17963c..aa2743a1d13 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -33,7 +33,6 @@ "@grafana/slate-react": "0.22.9-grafana", "@grafana/tsconfig": "^1.0.0-rc1", "@grafana/aws-sdk": "0.0.3", - "@iconscout/react-unicons": "1.1.4", "@popperjs/core": "2.5.4", "@sentry/browser": "5.25.0", "@testing-library/jest-dom": "5.11.9", diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx index ab913a09d45..3324eb616cc 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.tsx +++ b/packages/grafana-ui/src/components/Icon/Icon.tsx @@ -1,15 +1,12 @@ -import React, { ComponentType } from 'react'; +import React from 'react'; import { css, cx } from '@emotion/css'; -import { GrafanaTheme, toPascalCase } from '@grafana/data'; +import { GrafanaTheme } from '@grafana/data'; import { stylesFactory } from '../../themes/stylesFactory'; import { useTheme } from '../../themes/ThemeContext'; import { IconName, IconType, IconSize } from '../../types/icon'; -//@ts-ignore -import * as DefaultIcon from '@iconscout/react-unicons'; -import * as MonoIcon from './assets'; -import { customIcons } from './custom'; -import { SvgProps } from './assets/types'; +import SVG from '@leeoniya/react-inlinesvg'; +const iconRoot = '/public/img/icons/'; const alwaysMonoIcons: IconName[] = ['grafana', 'favorite', 'heart-break', 'heart', 'panel-add', 'reusable-panel']; export interface IconProps extends React.HTMLAttributes { @@ -36,47 +33,45 @@ const getIconStyles = stylesFactory((theme: GrafanaTheme) => { }; }); -function getIconComponent(name: IconName, type: string): ComponentType { - if (alwaysMonoIcons.includes(name)) { - type = 'mono'; - } - - if (name?.startsWith('gf-')) { - return customIcons[name]; - } - - const iconName = type === 'default' ? `Uil${toPascalCase(name)}` : toPascalCase(name); - - /* Unicons don't have type definitions */ - //@ts-ignore - const Component = type === 'default' ? DefaultIcon[iconName] : MonoIcon[iconName]; - - return Component ?? customIcons.notFoundDummy; +function getIconSubDir(name: IconName, type: string): string { + return name?.startsWith('gf-') + ? 'custom' + : alwaysMonoIcons.includes(name) + ? 'mono' + : type === 'default' + ? 'unicons' + : 'mono'; } export const Icon = React.forwardRef( ({ size = 'md', type = 'default', name, className, style, ...divElementProps }, ref) => { const theme = useTheme(); - const styles = getIconStyles(theme); - const svgSize = getSvgSize(size); /* Temporary solution to display also font awesome icons */ if (name?.startsWith('fa fa-')) { return ; } - const Component = getIconComponent(name, type); + if (name === 'panel-add') { + size = 'xl'; + } + + const styles = getIconStyles(theme); + const svgSize = getSvgSize(size); + const svgHgt = svgSize; + const svgWid = name?.startsWith('gf-bar-align') ? 16 : name?.startsWith('gf-interp') ? 30 : svgSize; + const subDir = getIconSubDir(name, type); + const svgPath = `${iconRoot}${subDir}/${name}.svg`; return (
- {type === 'default' && } - {type === 'mono' && ( - - )} +
); } diff --git a/packages/grafana-ui/src/components/Icon/assets/Apps.tsx b/packages/grafana-ui/src/components/Icon/assets/Apps.tsx deleted file mode 100644 index 40e2ecafb31..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/Apps.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const Apps: FunctionComponent = ({ size, ...rest }) => { - return ( - - - - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/Bell.tsx b/packages/grafana-ui/src/components/Icon/assets/Bell.tsx deleted file mode 100644 index 15e38157e5f..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/Bell.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const Bell: FunctionComponent = ({ size, ...rest }) => { - return ( - - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/Circle.tsx b/packages/grafana-ui/src/components/Icon/assets/Circle.tsx deleted file mode 100644 index 204a3c009b1..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/Circle.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const Circle: FunctionComponent = ({ size, ...rest }) => { - return ( - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/Cog.tsx b/packages/grafana-ui/src/components/Icon/assets/Cog.tsx deleted file mode 100644 index 5cb1295e691..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/Cog.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const Cog: FunctionComponent = ({ size, ...rest }) => { - return ( - - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/Favorite.tsx b/packages/grafana-ui/src/components/Icon/assets/Favorite.tsx deleted file mode 100644 index b8a96144649..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/Favorite.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const Favorite: FunctionComponent = ({ size, ...rest }) => { - return ( - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/Folder.tsx b/packages/grafana-ui/src/components/Icon/assets/Folder.tsx deleted file mode 100644 index 974ac4c971c..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/Folder.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const Folder: FunctionComponent = ({ size, ...rest }) => { - return ( - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/FolderPlus.tsx b/packages/grafana-ui/src/components/Icon/assets/FolderPlus.tsx deleted file mode 100644 index b6f11953ce0..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/FolderPlus.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const FolderPlus: FunctionComponent = ({ size, ...rest }) => { - return ( - - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/Grafana.tsx b/packages/grafana-ui/src/components/Icon/assets/Grafana.tsx deleted file mode 100644 index cc5bd01964b..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/Grafana.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const Grafana: FunctionComponent = ({ size, ...rest }) => { - return ( - - - - - - - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/Heart.tsx b/packages/grafana-ui/src/components/Icon/assets/Heart.tsx deleted file mode 100644 index aa27aad6298..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/Heart.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const Heart: FunctionComponent = ({ size, ...rest }) => { - return ( - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/HeartBreak.tsx b/packages/grafana-ui/src/components/Icon/assets/HeartBreak.tsx deleted file mode 100644 index 5e9a9f51bbf..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/HeartBreak.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const HeartBreak: FunctionComponent = ({ size, ...rest }) => { - return ( - - - - - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/Import.tsx b/packages/grafana-ui/src/components/Icon/assets/Import.tsx deleted file mode 100644 index 2eb978da784..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/Import.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const Import: FunctionComponent = ({ size, ...rest }) => { - return ( - - - - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/PanelAdd.tsx b/packages/grafana-ui/src/components/Icon/assets/PanelAdd.tsx deleted file mode 100644 index 72dbc8332a0..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/PanelAdd.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const PanelAdd: FunctionComponent = ({ ...rest }) => { - return ( - - - - - - - - - - - - - - - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/PlusSquare.tsx b/packages/grafana-ui/src/components/Icon/assets/PlusSquare.tsx deleted file mode 100644 index f70cc3d7f71..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/PlusSquare.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const PlusSquare: FunctionComponent = ({ size, ...rest }) => { - return ( - - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/ReusablePanel.tsx b/packages/grafana-ui/src/components/Icon/assets/ReusablePanel.tsx deleted file mode 100644 index 15f113f1a57..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/ReusablePanel.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const ReusablePanel: FunctionComponent = ({ size, ...rest }) => { - return ( - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/Shield.tsx b/packages/grafana-ui/src/components/Icon/assets/Shield.tsx deleted file mode 100644 index c540df22a1d..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/Shield.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const Shield: FunctionComponent = ({ size, ...rest }) => { - return ( - - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/SquareShape.tsx b/packages/grafana-ui/src/components/Icon/assets/SquareShape.tsx deleted file mode 100644 index 9d0f48e0f40..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/SquareShape.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { SvgProps } from './types'; - -export const SquareShape: FunctionComponent = ({ size, ...rest }) => { - return ( - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Icon/assets/index.ts b/packages/grafana-ui/src/components/Icon/assets/index.ts deleted file mode 100644 index 7e7998b6730..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -export * from './Apps'; -export * from './Bell'; -export * from './Circle'; -export * from './Cog'; -export * from './Favorite'; -export * from './Folder'; -export * from './FolderPlus'; -export * from './Grafana'; -export * from './Heart'; -export * from './HeartBreak'; -export * from './Import'; -export * from './PanelAdd'; -export * from './PlusSquare'; -export * from './ReusablePanel'; -export * from './Shield'; -export * from './SquareShape'; diff --git a/packages/grafana-ui/src/components/Icon/assets/types.ts b/packages/grafana-ui/src/components/Icon/assets/types.ts deleted file mode 100644 index cb2e973a731..00000000000 --- a/packages/grafana-ui/src/components/Icon/assets/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -export interface SvgProps extends React.HTMLAttributes { - size: number; - secondaryColor?: string; - className?: string; -} diff --git a/packages/grafana-ui/src/components/Icon/custom/index.tsx b/packages/grafana-ui/src/components/Icon/custom/index.tsx deleted file mode 100644 index 9059b14b45a..00000000000 --- a/packages/grafana-ui/src/components/Icon/custom/index.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import React, { FC, ComponentType } from 'react'; -import { SvgProps } from '../assets/types'; - -const InterpolationLinear: FC = ({ size, ...rest }) => { - return ( - - - - - - - - - - - - ); -}; - -const InterpolationSmooth: FC = ({ size, ...rest }) => { - return ( - - - - - - - - - - - - ); -}; - -const InterpolationStepBefore: FC = ({ size, ...rest }) => { - return ( - - - - - - - - - - - - ); -}; - -const InterpolationStepAfter: FC = ({ size, ...rest }) => { - return ( - - - - - - - - - - - - ); -}; - -export const Logs: FC = ({ size, ...rest }) => { - return ( - - - - ); -}; - -const IconNotFound: FC = ({ size, ...rest }) => { - return ; -}; - -const BarAlignmentAfter: FC = ({ size, ...rest }) => { - return ( - - - - - - - - - - ); -}; - -const BarAlignmentBefore: FC = ({ size, ...rest }) => { - return ( - - - - - - - - - - ); -}; - -const BarAlignmentCenter: FC = ({ size, ...rest }) => { - return ( - - - - - - - - - - - - ); -}; - -export const customIcons: Record> = { - 'gf-interpolation-linear': InterpolationLinear, - 'gf-interpolation-smooth': InterpolationSmooth, - 'gf-interpolation-step-before': InterpolationStepBefore, - 'gf-interpolation-step-after': InterpolationStepAfter, - 'gf-logs': Logs, - 'gf-bar-alignment-after': BarAlignmentAfter, - 'gf-bar-alignment-before': BarAlignmentBefore, - 'gf-bar-alignment-center': BarAlignmentCenter, - notFoundDummy: IconNotFound, -}; diff --git a/packages/grafana-ui/src/components/Icon/iconBundle.ts b/packages/grafana-ui/src/components/Icon/iconBundle.ts new file mode 100644 index 00000000000..e45a1d7989b --- /dev/null +++ b/packages/grafana-ui/src/components/Icon/iconBundle.ts @@ -0,0 +1,94 @@ +import { cacheStore } from '@leeoniya/react-inlinesvg'; + +// inlined static cache +import i001 from '!!raw-loader!../../../../../public/img/icons/unicons/bars.svg'; +import i002 from '!!raw-loader!../../../../../public/img/icons/unicons/times.svg'; +import i003 from '!!raw-loader!../../../../../public/img/icons/unicons/search.svg'; +import i004 from '!!raw-loader!../../../../../public/img/icons/unicons/plus.svg'; +import i005 from '!!raw-loader!../../../../../public/img/icons/unicons/apps.svg'; +import i006 from '!!raw-loader!../../../../../public/img/icons/unicons/folder-plus.svg'; +import i007 from '!!raw-loader!../../../../../public/img/icons/unicons/import.svg'; +import i008 from '!!raw-loader!../../../../../public/img/icons/unicons/home-alt.svg'; +import i009 from '!!raw-loader!../../../../../public/img/icons/unicons/sitemap.svg'; +import i010 from '!!raw-loader!../../../../../public/img/icons/unicons/presentation-play.svg'; +import i011 from '!!raw-loader!../../../../../public/img/icons/unicons/camera.svg'; +import i012 from '!!raw-loader!../../../../../public/img/icons/unicons/compass.svg'; +import i013 from '!!raw-loader!../../../../../public/img/icons/unicons/bell.svg'; +import i014 from '!!raw-loader!../../../../../public/img/icons/unicons/list-ul.svg'; +import i015 from '!!raw-loader!../../../../../public/img/icons/unicons/comment-alt-share.svg'; +import i016 from '!!raw-loader!../../../../../public/img/icons/unicons/cog.svg'; +import i017 from '!!raw-loader!../../../../../public/img/icons/unicons/database.svg'; +import i018 from '!!raw-loader!../../../../../public/img/icons/unicons/user.svg'; +import i019 from '!!raw-loader!../../../../../public/img/icons/unicons/users-alt.svg'; +import i020 from '!!raw-loader!../../../../../public/img/icons/unicons/plug.svg'; +import i021 from '!!raw-loader!../../../../../public/img/icons/unicons/sliders-v-alt.svg'; +import i022 from '!!raw-loader!../../../../../public/img/icons/unicons/key-skeleton-alt.svg'; +import i023 from '!!raw-loader!../../../../../public/img/icons/unicons/shield.svg'; +import i024 from '!!raw-loader!../../../../../public/img/icons/unicons/building.svg'; +import i025 from '!!raw-loader!../../../../../public/img/icons/unicons/graph-bar.svg'; +import i026 from '!!raw-loader!../../../../../public/img/icons/unicons/unlock.svg'; +import i027 from '!!raw-loader!../../../../../public/img/icons/unicons/lock.svg'; +import i028 from '!!raw-loader!../../../../../public/img/icons/unicons/arrow-from-right.svg'; +import i029 from '!!raw-loader!../../../../../public/img/icons/unicons/question-circle.svg'; +import i030 from '!!raw-loader!../../../../../public/img/icons/unicons/document-info.svg'; +import i031 from '!!raw-loader!../../../../../public/img/icons/unicons/comments-alt.svg'; +import i032 from '!!raw-loader!../../../../../public/img/icons/unicons/keyboard.svg'; +import i033 from '!!raw-loader!../../../../../public/img/icons/unicons/star.svg'; +import i034 from '!!raw-loader!../../../../../public/img/icons/unicons/share-alt.svg'; +import i035 from '!!raw-loader!../../../../../public/img/icons/mono/panel-add.svg'; +import i036 from '!!raw-loader!../../../../../public/img/icons/unicons/save.svg'; +import i037 from '!!raw-loader!../../../../../public/img/icons/unicons/clock-nine.svg'; +import i038 from '!!raw-loader!../../../../../public/img/icons/unicons/angle-down.svg'; +import i039 from '!!raw-loader!../../../../../public/img/icons/unicons/search-minus.svg'; +import i040 from '!!raw-loader!../../../../../public/img/icons/unicons/sync.svg'; +import i041 from '!!raw-loader!../../../../../public/img/icons/unicons/monitor.svg'; +import i042 from '!!raw-loader!../../../../../public/img/icons/unicons/trash-alt.svg'; + +const iconRoot = '/public/img/icons/'; + +function cacheItem(content: string, path: string) { + cacheStore[iconRoot + path] = { content, status: 'loaded', queue: [] }; +} + +cacheItem(i001, 'unicons/bars.svg'); +cacheItem(i002, 'unicons/times.svg'); +cacheItem(i003, 'unicons/search.svg'); +cacheItem(i004, 'unicons/plus.svg'); +cacheItem(i005, 'unicons/apps.svg'); +cacheItem(i006, 'unicons/folder-plus.svg'); +cacheItem(i007, 'unicons/import.svg'); +cacheItem(i008, 'unicons/home-alt.svg'); +cacheItem(i009, 'unicons/sitemap.svg'); +cacheItem(i010, 'unicons/presentation-play.svg'); +cacheItem(i011, 'unicons/camera.svg'); +cacheItem(i012, 'unicons/compass.svg'); +cacheItem(i013, 'unicons/bell.svg'); +cacheItem(i014, 'unicons/list-ul.svg'); +cacheItem(i015, 'unicons/comment-alt-share.svg'); +cacheItem(i016, 'unicons/cog.svg'); +cacheItem(i017, 'unicons/database.svg'); +cacheItem(i018, 'unicons/user.svg'); +cacheItem(i019, 'unicons/users-alt.svg'); +cacheItem(i020, 'unicons/plug.svg'); +cacheItem(i021, 'unicons/sliders-v-alt.svg'); +cacheItem(i022, 'unicons/key-skeleton-alt.svg'); +cacheItem(i023, 'unicons/shield.svg'); +cacheItem(i024, 'unicons/building.svg'); +cacheItem(i025, 'unicons/graph-bar.svg'); +cacheItem(i026, 'unicons/unlock.svg'); +cacheItem(i027, 'unicons/lock.svg'); +cacheItem(i028, 'unicons/arrow-from-right.svg'); +cacheItem(i029, 'unicons/question-circle.svg'); +cacheItem(i030, 'unicons/document-info.svg'); +cacheItem(i031, 'unicons/comments-alt.svg'); +cacheItem(i032, 'unicons/keyboard.svg'); +cacheItem(i033, 'unicons/star.svg'); +cacheItem(i034, 'unicons/share-alt.svg'); +cacheItem(i035, 'mono/panel-add.svg'); +cacheItem(i036, 'unicons/save.svg'); +cacheItem(i037, 'unicons/clock-nine.svg'); +cacheItem(i038, 'unicons/angle-down.svg'); +cacheItem(i039, 'unicons/search-minus.svg'); +cacheItem(i040, 'unicons/sync.svg'); +cacheItem(i041, 'unicons/monitor.svg'); +cacheItem(i042, 'unicons/trash-alt.svg'); diff --git a/public/app/app.ts b/public/app/app.ts index d4039c905da..be9b48e6876 100644 --- a/public/app/app.ts +++ b/public/app/app.ts @@ -4,9 +4,10 @@ import 'regenerator-runtime/runtime'; import 'whatwg-fetch'; // fetch polyfill needed for PhantomJs rendering import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'; // fetch polyfill needed for PhantomJs rendering - import 'file-saver'; import 'jquery'; +import '@grafana/ui/src/components/Icon/iconBundle'; + import _ from 'lodash'; import ReactDOM from 'react-dom'; import React from 'react'; diff --git a/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap index e0620bf045f..8e42ad57225 100644 --- a/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap +++ b/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap @@ -83,24 +83,14 @@ exports[`Render should render component 1`] = `
- - - - - + height={24} + src="/public/img/icons/unicons/cloud.svg" + uniquifyIDs={false} + width={24} + />
diff --git a/public/img/icons/.gitignore b/public/img/icons/.gitignore new file mode 100644 index 00000000000..dba461b3c9a --- /dev/null +++ b/public/img/icons/.gitignore @@ -0,0 +1,4 @@ +# unicons folder is imported via webpack +# https://github.com/Iconscout/unicons/tarball/d0859416ab8d8e60dcfa1c0b50716874fcf11778 +# just the line icons +unicons \ No newline at end of file diff --git a/public/img/icons/custom/gf-bar-alignment-after.svg b/public/img/icons/custom/gf-bar-alignment-after.svg new file mode 100644 index 00000000000..7db1f010421 --- /dev/null +++ b/public/img/icons/custom/gf-bar-alignment-after.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/img/icons/custom/gf-bar-alignment-before.svg b/public/img/icons/custom/gf-bar-alignment-before.svg new file mode 100644 index 00000000000..f05102104d7 --- /dev/null +++ b/public/img/icons/custom/gf-bar-alignment-before.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/img/icons/custom/gf-bar-alignment-center.svg b/public/img/icons/custom/gf-bar-alignment-center.svg new file mode 100644 index 00000000000..7b25c441a46 --- /dev/null +++ b/public/img/icons/custom/gf-bar-alignment-center.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/img/icons/custom/gf-interpolation-linear.svg b/public/img/icons/custom/gf-interpolation-linear.svg new file mode 100644 index 00000000000..3a3ce70c604 --- /dev/null +++ b/public/img/icons/custom/gf-interpolation-linear.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/img/icons/custom/gf-interpolation-smooth.svg b/public/img/icons/custom/gf-interpolation-smooth.svg new file mode 100644 index 00000000000..6674465f9e3 --- /dev/null +++ b/public/img/icons/custom/gf-interpolation-smooth.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/img/icons/custom/gf-interpolation-step-after.svg b/public/img/icons/custom/gf-interpolation-step-after.svg new file mode 100644 index 00000000000..6b653aa7a1d --- /dev/null +++ b/public/img/icons/custom/gf-interpolation-step-after.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/img/icons/custom/gf-interpolation-step-before.svg b/public/img/icons/custom/gf-interpolation-step-before.svg new file mode 100644 index 00000000000..0566b386158 --- /dev/null +++ b/public/img/icons/custom/gf-interpolation-step-before.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/img/icons/custom/gf-logs.svg b/public/img/icons/custom/gf-logs.svg new file mode 100644 index 00000000000..6e7a400975f --- /dev/null +++ b/public/img/icons/custom/gf-logs.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/img/icons/mono/apps.svg b/public/img/icons/mono/apps.svg new file mode 100644 index 00000000000..066bd25d6a9 --- /dev/null +++ b/public/img/icons/mono/apps.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/mono/bell.svg b/public/img/icons/mono/bell.svg new file mode 100644 index 00000000000..f9da5fb41dc --- /dev/null +++ b/public/img/icons/mono/bell.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/mono/circle.svg b/public/img/icons/mono/circle.svg new file mode 100644 index 00000000000..afb4749ff10 --- /dev/null +++ b/public/img/icons/mono/circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/mono/cog.svg b/public/img/icons/mono/cog.svg new file mode 100644 index 00000000000..5f88c814cb8 --- /dev/null +++ b/public/img/icons/mono/cog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/mono/favorite.svg b/public/img/icons/mono/favorite.svg new file mode 100644 index 00000000000..f8ef2359faf --- /dev/null +++ b/public/img/icons/mono/favorite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/mono/folder-plus.svg b/public/img/icons/mono/folder-plus.svg new file mode 100644 index 00000000000..a73e1720b46 --- /dev/null +++ b/public/img/icons/mono/folder-plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/mono/folder.svg b/public/img/icons/mono/folder.svg new file mode 100644 index 00000000000..5eedf727daa --- /dev/null +++ b/public/img/icons/mono/folder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/mono/grafana.svg b/public/img/icons/mono/grafana.svg new file mode 100644 index 00000000000..9b00ba0cb0b --- /dev/null +++ b/public/img/icons/mono/grafana.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/mono/heart-break.svg b/public/img/icons/mono/heart-break.svg new file mode 100644 index 00000000000..94acaf1d253 --- /dev/null +++ b/public/img/icons/mono/heart-break.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/mono/heart.svg b/public/img/icons/mono/heart.svg new file mode 100644 index 00000000000..8a343a306b2 --- /dev/null +++ b/public/img/icons/mono/heart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/mono/import.svg b/public/img/icons/mono/import.svg new file mode 100644 index 00000000000..c2d35da09c5 --- /dev/null +++ b/public/img/icons/mono/import.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/mono/panel-add.svg b/public/img/icons/mono/panel-add.svg new file mode 100644 index 00000000000..fc441aa9201 --- /dev/null +++ b/public/img/icons/mono/panel-add.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/mono/plus-square.svg b/public/img/icons/mono/plus-square.svg new file mode 100644 index 00000000000..40f3798cb51 --- /dev/null +++ b/public/img/icons/mono/plus-square.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/mono/reusable-panel.svg b/public/img/icons/mono/reusable-panel.svg new file mode 100644 index 00000000000..7dbd9a2c8e9 --- /dev/null +++ b/public/img/icons/mono/reusable-panel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/mono/shield.svg b/public/img/icons/mono/shield.svg new file mode 100644 index 00000000000..9b2d4d987d1 --- /dev/null +++ b/public/img/icons/mono/shield.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/mono/square-shape.svg b/public/img/icons/mono/square-shape.svg new file mode 100644 index 00000000000..856cd02fca3 --- /dev/null +++ b/public/img/icons/mono/square-shape.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scripts/webpack/webpack.common.js b/scripts/webpack/webpack.common.js index 07a86287bc5..652c0c96eb4 100644 --- a/scripts/webpack/webpack.common.js +++ b/scripts/webpack/webpack.common.js @@ -1,8 +1,22 @@ +const fs = require('fs-extra'); const path = require('path'); const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); const getBabelConfig = require('./babel.config'); +class CopyUniconsPlugin { + apply(compiler) { + compiler.hooks.afterEnvironment.tap('CopyUniconsPlugin', () => { + let destDir = path.resolve(__dirname, '../../public/img/icons/unicons'); + + if (!fs.pathExistsSync(destDir)) { + let srcDir = path.resolve(__dirname, '../../node_modules/iconscout-unicons-tarball/unicons/svg/line'); + fs.copySync(srcDir, destDir); + } + }); + } +} + // https://github.com/visionmedia/debug/issues/701#issuecomment-505487361 function shouldExclude(filename) { // There is external js code inside this which needs to be processed by babel. @@ -17,7 +31,6 @@ function shouldExclude(filename) { 'apache-arrow', 'react-hook-form', 'rc-trigger', - '@iconscout/react-unicons', 'monaco-editor', ]; for (const package of packagesToProcessbyBabel) { @@ -69,6 +82,7 @@ module.exports = { fs: 'empty', }, plugins: [ + new CopyUniconsPlugin(), new MonacoWebpackPlugin({ // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options filename: 'monaco-[name].worker.js', @@ -170,6 +184,11 @@ module.exports = { // include: MONACO_DIR, // https://github.com/react-monaco-editor/react-monaco-editor use: ['style-loader', 'css-loader'], }, + // for pre-caching SVGs as part of the JS bundles + { + test: /\.svg$/, + use: 'raw-loader', + }, { test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/, loader: 'file-loader', diff --git a/yarn.lock b/yarn.lock index 950d970015c..f36fb551999 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3410,13 +3410,6 @@ resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8" integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw== -"@iconscout/react-unicons@1.1.4": - version "1.1.4" - resolved "https://registry.yarnpkg.com/@iconscout/react-unicons/-/react-unicons-1.1.4.tgz#30731707e1baa49ab1c3198a5e0121be86b8928a" - integrity sha512-lhTSU3nKvzt1OwsRfFyK194QcQbE1Q4rRm6d5BOnKyZB+SN4qRv7tS4wLQgwk/pQyzn14Qw70nGA+tuKLRqcJg== - dependencies: - react ">=15.0.0 <17.0.0" - "@istanbuljs/load-nyc-config@^1.0.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced" @@ -3701,6 +3694,14 @@ "@types/yargs" "^15.0.0" chalk "^4.0.0" +"@leeoniya/react-inlinesvg@2.2.4": + version "2.2.4" + resolved "https://registry.yarnpkg.com/@leeoniya/react-inlinesvg/-/react-inlinesvg-2.2.4.tgz#b1f226136945fc692ea37f5a889e6545c9334336" + integrity sha512-6zaOOjYjrTC/D6tQKIPmoh+T+8d7h2kCZYbbSjEYt2Sz0OtPZw44v+MKVXiRHVYrlODgT1viJbrUmrSH0k7wOA== + dependencies: + exenv "^1.2.2" + react-from-dom "^0.6.0" + "@lerna/add@3.21.0": version "3.21.0" resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.21.0.tgz#27007bde71cc7b0a2969ab3c2f0ae41578b4577b" @@ -13123,6 +13124,11 @@ executable@^4.1.1: dependencies: pify "^2.2.0" +exenv@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= + exit-hook@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8" @@ -13828,6 +13834,16 @@ fs-extra@8.1.0, fs-extra@^8.1.0: jsonfile "^4.0.0" universalify "^0.1.0" +fs-extra@9.1.0, fs-extra@^9.0.1: + version "9.1.0" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d" + integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ== + dependencies: + at-least-node "^1.0.0" + graceful-fs "^4.2.0" + jsonfile "^6.0.1" + universalify "^2.0.0" + fs-extra@^0.30.0: version "0.30.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0" @@ -13858,16 +13874,6 @@ fs-extra@^9.0.0: jsonfile "^6.0.1" universalify "^1.0.0" -fs-extra@^9.0.1: - version "9.1.0" - resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d" - integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ== - dependencies: - at-least-node "^1.0.0" - graceful-fs "^4.2.0" - jsonfile "^6.0.1" - universalify "^2.0.0" - fs-extra@~7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9" @@ -15130,6 +15136,10 @@ hyphenate-style-name@^1.0.2: resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48" integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ== +"iconscout-unicons-tarball@https://github.com/grafana/icons/tarball/14e6856f7ce5a44d3e722b40c225482663cbfd66": + version "0.0.0" + resolved "https://github.com/grafana/icons/tarball/14e6856f7ce5a44d3e722b40c225482663cbfd66#416ef13f075fc9c7f5c4b722586fc9b69140c30d" + iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@^0.4.8, iconv-lite@~0.4.13: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -21321,7 +21331,7 @@ raw-body@2.4.0: iconv-lite "0.4.24" unpipe "1.0.0" -raw-loader@^4.0.1: +raw-loader@4.0.2, raw-loader@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6" integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA== @@ -21715,6 +21725,11 @@ react-fast-compare@^3.0.1, react-fast-compare@^3.2.0: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== +react-from-dom@^0.6.0: + version "0.6.0" + resolved "https://registry.yarnpkg.com/react-from-dom/-/react-from-dom-0.6.0.tgz#8b9710ba7fbd36cde9e13e9eb26f5f67ab933678" + integrity sha512-W5m1pYV7qlc9bmpA7p2K/wspYNlAh3aqJ9Tc5KRXe6vt/JlX6/84ol+RQlCMK69z+5e38sOpoVW5i4Qpqgs+EA== + react-grid-layout@1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-1.2.0.tgz#87124d549c86c8df8841666618c8c3e3cb205c26" @@ -22124,15 +22139,6 @@ react@17.0.1: loose-envify "^1.1.0" object-assign "^4.1.1" -"react@>=15.0.0 <17.0.0": - version "16.13.1" - resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" - integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - prop-types "^15.6.2" - reactcss@^1.2.0: version "1.2.3" resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"