Skip to content
Snippets Groups Projects
Commit 49d88d42 authored by Tom Robinson's avatar Tom Robinson
Browse files

Add raw SVG icons and support in Icon react component

parent 60cf541e
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/frontend_client/app/components/icons/icons.js
+ 3
− 1
View file @ 49d88d42
'use strict';
import ICON_PATHS from 'metabase/icon_paths';
import { ICON_PATHS } from 'metabase/icon_paths';
// TODO: support ICON_SVGS
/*
GENERIC ICONS
......
resources/frontend_client/app/icon_paths.js
+ 8
− 1
View file @ 49d88d42
......@@ -11,7 +11,7 @@
*/
export default {
export var ICON_PATHS = {
add: 'M19,13 L19,2 L14,2 L14,13 L2,13 L2,18 L14,18 L14,30 L19,30 L19,18 L30,18 L30,13 L19,13 Z',
addtodash: 'M15,14 L15,12 L14,12 L14,14 L12,14 L12,15 L14,15 L14,17 L15,17 L15,15 L17,15 L17,14 L15,14 Z M0,0 L5,0 L5,5 L0,5 L0,0 Z M17,6 L6,6 L6,11 L17,11 L17,6 Z M0,12 L11,12 L11,17 L0,17 L0,12 Z M6,0 L11,0 L11,5 L6,5 L6,0 Z M12,0 L17,0 L17,5 L12,5 L12,0 Z M5,6 L0,6 L0,11 L5,11 L5,6 Z',
area: 'M25.4980562,23.9977382 L26.0040287,23.9999997 L26.0040283,22.4903505 L26.0040283,14 L26.0040287,12 L25.3213548,13.2692765 C25.3213548,13.2692765 22.6224921,15.7906709 21.2730607,17.0513681 C21.1953121,17.1240042 15.841225,18.0149981 15.841225,18.0149981 L15.5173319,18.0717346 L15.2903187,18.3096229 L10.5815987,23.2439142 L9.978413,23.9239006 L11.3005782,23.9342813 L25.4980562,23.9977382 L11.3050484,23.9342913 L16.0137684,19 L21.7224883,18 L26.0040283,14 L26.0040283,23.4903505 C26.0040283,23.7718221 25.7731425,23.9989679 25.4980562,23.9977382 Z M7,23.9342913 L14,16 L21,14 L25.6441509,9.35958767 C25.8429057,9.16099288 26.0040283,9.22974944 26.0040283,9.49379817 L26.0040283,13 L26.0040283,24 L7,23.9342913 Z',
......@@ -47,3 +47,10 @@ export default {
statemap: 'M19.4375,6.97396734 L27,8.34417492 L27,25.5316749 L18.7837192,23.3765689 L11.875,25.3366259 L11.875,25.3366259 L11.875,11.0941749 L11.1875,11.0941749 L11.1875,25.5316749 L5,24.1566749 L5,7.65667492 L11.1875,9.03167492 L18.75,6.90135976 L18.75,22.0941749 L19.4375,22.0941749 L19.4375,6.97396734 Z',
table: 'M13.6373197,13.6373197 L18.3626803,13.6373197 L18.3626803,18.3626803 L13.6373197,18.3626803 L13.6373197,13.6373197 Z M18.9533504,18.9533504 L23.6787109,18.9533504 L23.6787109,23.6787109 L18.9533504,23.6787109 L18.9533504,18.9533504 Z M13.6373197,18.9533504 L18.3626803,18.9533504 L18.3626803,23.6787109 L13.6373197,23.6787109 L13.6373197,18.9533504 Z M8.32128906,18.9533504 L13.0466496,18.9533504 L13.0466496,23.6787109 L8.32128906,23.6787109 L8.32128906,18.9533504 Z M8.32128906,8.32128906 L13.0466496,8.32128906 L13.0466496,13.0466496 L8.32128906,13.0466496 L8.32128906,8.32128906 Z M8.32128906,13.6373197 L13.0466496,13.6373197 L13.0466496,18.3626803 L8.32128906,18.3626803 L8.32128906,13.6373197 Z M18.9533504,8.32128906 L23.6787109,8.32128906 L23.6787109,13.0466496 L18.9533504,13.0466496 L18.9533504,8.32128906 Z M18.9533504,13.6373197 L23.6787109,13.6373197 L23.6787109,18.3626803 L18.9533504,18.3626803 L18.9533504,13.6373197 Z M13.6373197,8.32128906 L18.3626803,8.32128906 L18.3626803,13.0466496 L13.6373197,13.0466496 L13.6373197,8.32128906 Z',
};
export var ICON_SVGS = {
"illustration-icon-pie": "<path d='M29.8065455,22.2351515 L15.7837576,15.9495758 L15.7837576,31.2174545 C22.0004848,31.2029091 27.3444848,27.5258182 29.8065455,22.2351515' fill='#78B5EC'></path><g id='Fill-1-+-Fill-3'><path d='M29.8065455,22.2351515 C30.7316364,20.2482424 31.2630303,18.0402424 31.2630303,15.7032727 C31.2630303,11.8138182 29.8220606,8.26763636 27.4569697,5.54472727 L15.7837576,15.9495758 L29.8065455,22.2351515' fill='#3875AC'></path><path d='M27.4569697,5.54472727 C24.6118788,2.26909091 20.4266667,0.188121212 15.7478788,0.188121212 C7.17963636,0.188121212 0.232727273,7.1350303 0.232727273,15.7032727 C0.232727273,24.2724848 7.17963636,31.2184242 15.7478788,31.2184242 C15.7604848,31.2184242 15.7721212,31.2174545 15.7837576,31.2174545 L15.7837576,15.9495758 L27.4569697,5.54472727' fill='#4C9DE6'></path></g>",
"illustration-icon-scalar": "<g id='Fill-1-+-Fill-2-+-Fill-3' transform='translate(0.000000, 8.000000)' fill='#4C9DE6'><path d='M1.56121212,13.28 L4.54787879,13.28 L4.54787879,3.8070303 C4.54787879,3.52290909 4.55757576,3.23490909 4.5769697,2.944 L2.09454545,5.06763636 C2.02957576,5.1190303 1.96460606,5.15587879 1.90060606,5.17915152 C1.83563636,5.20145455 1.77454545,5.21309091 1.71636364,5.21309091 C1.61939394,5.21309091 1.53212121,5.19272727 1.45454545,5.14909091 C1.3769697,5.10836364 1.31878788,5.05793939 1.28,4.99878788 L0.736969697,4.25309091 L4.86787879,0.673939394 L6.27393939,0.673939394 L6.27393939,13.28 L9.00848485,13.28 L9.00848485,14.5997576 L1.56121212,14.5997576 L1.56121212,13.28'></path><path d='M15.8535758,0.547878788 C16.4421818,0.547878788 16.992,0.635151515 17.5030303,0.810666667 C18.0130909,0.985212121 18.454303,1.23830303 18.8266667,1.57187879 C19.1980606,1.90448485 19.4899394,2.31078788 19.7042424,2.78884848 C19.9175758,3.26690909 20.0242424,3.80993939 20.0242424,4.41793939 C20.0242424,4.93478788 19.945697,5.41284848 19.7905455,5.85309091 C19.6363636,6.29236364 19.4259394,6.71418182 19.1602424,7.11854545 C18.8955152,7.52290909 18.5900606,7.91369697 18.2448485,8.29187879 C17.8986667,8.66909091 17.5321212,9.056 17.1432727,9.45066667 L13.4875152,13.1927273 C13.7464242,13.1219394 14.0082424,13.065697 14.2729697,13.024 C14.5386667,12.982303 14.793697,12.96 15.0390303,12.96 L19.6945455,12.96 C19.881697,12.96 20.0300606,13.0162424 20.1406061,13.1258182 C20.2501818,13.2353939 20.3054545,13.3779394 20.3054545,13.5524848 L20.3054545,14.5997576 L11.0341818,14.5997576 L11.0341818,14.0072727 C11.0341818,13.8850909 11.0584242,13.7590303 11.1078788,13.6300606 C11.1553939,13.5010909 11.2349091,13.3808485 11.3444848,13.2712727 L15.7963636,8.8 C16.1648485,8.42569697 16.5003636,8.0649697 16.8048485,7.71975758 C17.1083636,7.37454545 17.3682424,7.02642424 17.5844848,6.67733333 C17.801697,6.32727273 17.9675152,5.97430303 18.0848485,5.61551515 C18.2012121,5.25672727 18.2593939,4.87272727 18.2593939,4.46545455 C18.2593939,4.05915152 18.1944242,3.70133333 18.0654545,3.39490909 C17.9355152,3.08848485 17.7580606,2.83442424 17.5321212,2.63369697 C17.3052121,2.4329697 17.0404848,2.28363636 16.736,2.18278788 C16.4324848,2.08290909 16.1066667,2.03248485 15.7575758,2.03248485 C15.4075152,2.03248485 15.0846061,2.08387879 14.7878788,2.18763636 C14.4901818,2.29042424 14.2264242,2.43490909 13.9975758,2.61818182 C13.7677576,2.80339394 13.5738182,3.02060606 13.4157576,3.27369697 C13.2567273,3.52581818 13.1452121,3.80412121 13.0802424,4.10666667 C13.0288485,4.29478788 12.9512727,4.43054545 12.8484848,4.51393939 C12.7447273,4.59830303 12.6089697,4.6409697 12.4412121,4.6409697 C12.4082424,4.6409697 12.374303,4.6390303 12.3384242,4.63515152 C12.3035152,4.63224242 12.2627879,4.62836364 12.2172121,4.62157576 L11.3163636,4.46545455 C11.4065455,3.83224242 11.5810909,3.27175758 11.84,2.784 C12.0979394,2.29527273 12.4266667,1.88606061 12.8232727,1.55636364 C13.2208485,1.22763636 13.6775758,0.977454545 14.1905455,0.805818182 C14.7054545,0.634181818 15.2591515,0.547878788 15.8535758,0.547878788'></path><path d='M27.286303,0.547878788 C27.8749091,0.547878788 28.4179394,0.632242424 28.9153939,0.8 C29.4128485,0.968727273 29.8414545,1.20824242 30.2002424,1.51757576 C30.5590303,1.82884848 30.838303,2.20412121 31.0390303,2.64339394 C31.2397576,3.08266667 31.3396364,3.57139394 31.3396364,4.10666667 C31.3396364,4.54787879 31.2833939,4.93963636 31.1699394,5.28484848 C31.0574545,5.632 30.8945455,5.93551515 30.6850909,6.19733333 C30.4746667,6.45915152 30.2215758,6.68024242 29.9238788,6.86060606 C29.6261818,7.04290909 29.2935758,7.18739394 28.9250909,7.2969697 C29.8298182,7.53745455 30.5105455,7.9369697 30.966303,8.50036364 C31.4220606,9.06278788 31.6499394,9.76678788 31.6499394,10.6133333 C31.6499394,11.2533333 31.5287273,11.8293333 31.286303,12.3403636 C31.0438788,12.8504242 30.7122424,13.2848485 30.2923636,13.6436364 C29.8724848,14.0024242 29.3818182,14.2778182 28.8232727,14.4688485 C28.2647273,14.6589091 27.6644848,14.7549091 27.0244848,14.7549091 C26.2875152,14.7549091 25.6572121,14.6627879 25.1335758,14.4785455 C24.6099394,14.2933333 24.1667879,14.0412121 23.8050909,13.7163636 C23.4424242,13.3944242 23.145697,13.0104242 22.9129697,12.5682424 C22.6802424,12.1250909 22.4833939,11.6450909 22.3214545,11.1282424 L23.0584242,10.8169697 C23.1941818,10.7597576 23.3299394,10.729697 23.465697,10.729697 C23.5946667,10.729697 23.7100606,10.7578182 23.8099394,10.8121212 C23.9098182,10.8673939 23.9854545,10.953697 24.0378182,11.0700606 C24.0504242,11.0952727 24.064,11.1233939 24.0766061,11.1524848 C24.0892121,11.1806061 24.1027879,11.2126061 24.1153939,11.2446061 C24.2065455,11.4317576 24.3161212,11.6441212 24.4450909,11.8797576 C24.5740606,12.1153939 24.7495758,12.3374545 24.9687273,12.544 C25.1888485,12.7505455 25.4613333,12.9250909 25.7881212,13.0676364 C26.1149091,13.2092121 26.5202424,13.28 27.0050909,13.28 C27.4899394,13.28 27.9146667,13.2014545 28.2802424,13.0424242 C28.6458182,12.8843636 28.9493333,12.6787879 29.1917576,12.4266667 C29.4341818,12.1755152 29.6174545,11.894303 29.7396364,11.5830303 C29.8627879,11.273697 29.9238788,10.9672727 29.9238788,10.6627879 C29.9238788,10.2875152 29.8734545,9.94521212 29.7735758,9.63490909 C29.673697,9.32363636 29.4923636,9.056 29.2305455,8.82909091 C28.9687273,8.60315152 28.6070303,8.42569697 28.1444848,8.29672727 C27.6819394,8.16775758 27.0894545,8.10181818 26.3650909,8.10181818 L26.3650909,6.84218182 C26.953697,6.84218182 27.456,6.78012121 27.8729697,6.6569697 C28.2899394,6.53478788 28.6312727,6.36606061 28.896,6.15369697 C29.1607273,5.94036364 29.353697,5.68436364 29.4729697,5.38763636 C29.5922424,5.08993939 29.6523636,4.76024242 29.6523636,4.39854545 C29.6523636,3.99709091 29.5893333,3.6489697 29.4632727,3.35127273 C29.3372121,3.05357576 29.1646061,2.80727273 28.9444848,2.61333333 C28.7243636,2.42036364 28.4644848,2.27490909 28.1638788,2.17793939 C27.8632727,2.08 27.5384242,2.03248485 27.1893333,2.03248485 C26.8402424,2.03248485 26.5173333,2.08387879 26.2196364,2.18763636 C25.9229091,2.29042424 25.6591515,2.43490909 25.4293333,2.61818182 C25.1995152,2.80242424 25.0075152,3.02157576 24.8523636,3.27757576 C24.6972121,3.53260606 24.5808485,3.808 24.5032727,4.10472727 C24.4518788,4.29284848 24.374303,4.42763636 24.2705455,4.512 C24.1667879,4.59539394 24.0349091,4.63806061 23.8729697,4.63806061 C23.8409697,4.63806061 23.8060606,4.63612121 23.7711515,4.63321212 C23.7352727,4.62933333 23.6955152,4.62448485 23.6499394,4.61866667 L22.7481212,4.46545455 C22.838303,3.83224242 23.0138182,3.27175758 23.2717576,2.784 C23.5306667,2.29527273 23.8584242,1.88606061 24.256,1.55636364 C24.6535758,1.22763636 25.1093333,0.977454545 25.6232727,0.805818182 C26.1372121,0.634181818 26.6918788,0.547878788 27.286303,0.547878788'></path></g>",
"illustration-icon-table": "<g transform='translate(0.000000, 2.000000)'><path d='M0,0 L32,0 L32,29 L0,29 L0,0 Z' fill='#4C9DE6'></path><g id='Fill-2-+-Fill-3-+-Fill-4' transform='translate(1.000000, 25.000000)' fill='#78B5EC'><path d='M0,0 L8,0 L8,3 L0,3 L0,0 Z'></path><path d='M9,0 L21,0 L21,3 L9,3 L9,0 Z'></path><path d='M22,0 L30,0 L30,3 L22,3 L22,0 Z'></path></g><g id='Fill-2-+-Fill-3-+-Fill-4-Copy' transform='translate(1.000000, 21.000000)' fill='#78B5EC'><path d='M0,0 L8,0 L8,3 L0,3 L0,0 Z'></path><path d='M9,0 L21,0 L21,3 L9,3 L9,0 Z'></path><path d='M22,0 L30,0 L30,3 L22,3 L22,0 Z'></path></g><g id='Fill-2-+-Fill-3-+-Fill-4-Copy-2' transform='translate(1.000000, 17.000000)' fill='#78B5EC'><path d='M0,0 L8,0 L8,3 L0,3 L0,0 Z'></path><path d='M9,0 L21,0 L21,3 L9,3 L9,0 Z'></path><path d='M22,0 L30,0 L30,3 L22,3 L22,0 Z'></path></g><g id='Fill-2-+-Fill-3-+-Fill-4-Copy-3' transform='translate(1.000000, 13.000000)' fill='#78B5EC'><path d='M0,0 L8,0 L8,3 L0,3 L0,0 Z'></path><path d='M9,0 L21,0 L21,3 L9,3 L9,0 Z'></path><path d='M22,0 L30,0 L30,3 L22,3 L22,0 Z'></path></g><g id='Fill-2-+-Fill-3-+-Fill-4-Copy-4' transform='translate(1.000000, 9.000000)' fill='#78B5EC'><path d='M0,0 L8,0 L8,3 L0,3 L0,0 Z'></path><path d='M9,0 L21,0 L21,3 L9,3 L9,0 Z'></path><path d='M22,0 L30,0 L30,3 L22,3 L22,0 Z'></path></g><path d='M1,1 L31,1 L31,8 L1,8 L1,1 Z' fill='#3875AC'></path></g>",
"illustration-icon-bars": "<g><path d='M5,15 L11,15 L11,31 L5,31 L5,15 Z' fill='#78B5EC'></path><path d='M13,0 L19,0 L19,31 L13,31 L13,0 Z' fill='#4C9DE6'></path><path d='M21,7 L27,7 L27,31 L21,31 L21,7 Z' fill='#3875AC'></path><path d='M0,31 L32,31 L32,32 L0,32 L0,31 Z' fill='#4C9DE6'></path></g>"
};
resources/frontend_client/app/query_builder/icon.react.js
+ 24
− 13
View file @ 49d88d42
'use strict';
import ICON_PATHS from 'metabase/icon_paths';
import { ICON_PATHS, ICON_SVGS } from 'metabase/icon_paths';
export default React.createClass({
displayName: 'Icon',
......@@ -12,22 +12,33 @@ export default React.createClass({
};
},
render: function () {
var iconPath = ICON_PATHS[this.props.name],
path;
if (ICON_PATHS[this.props.name] != undefined) {
var iconPath = ICON_PATHS[this.props.name],
path;
// handle multi path icons which appear as non strings
if(typeof(iconPath) != 'string') {
// create a path for each path present
path = iconPath.map(function (path) {
return (<path d={path} /> );
});
} else {
path = (<path d={iconPath} />);
}
// handle multi path icons which appear as non strings
if(typeof(iconPath) != 'string') {
// create a path for each path present
path = iconPath.map(function (path) {
return (<path d={path} /> );
});
} else {
path = (<path d={iconPath} />);
}
return (
<svg viewBox="0 0 32 32" {... this.props} className={'Icon Icon-' + this.props.name}>
{path}
</svg>
);
} else if (ICON_SVGS[this.props.name] != undefined) {
var html = ICON_SVGS[this.props.name];
return (
<svg viewBox="0 0 32 32" {... this.props} className={'Icon Icon-' + this.props.name} dangerouslySetInnerHTML={{__html: html}}></svg>
);
}
return (
<svg viewBox="0 0 32 32" {... this.props} className={'Icon Icon-' + this.props.name}>
{path}
</svg>
);
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment