Commit 23cdbb05 authored by Jubke's avatar Jubke
Browse files

svg icons

- added sag icons
- added icon font
- example usage in tabs (might be useful to create a component for
icons)
parent a7e90c16
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2015-8-30: Created with FontForge (http://fontforge.org)
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<metadata>
Created by FontForge 20150828 at Sun Aug 30 21:14:31 2015
By Julian Lübke
Copyright (c) 2015, Julian L&#195;&#188;bke
</metadata>
<defs>
<font id="icons" horiz-adv-x="512" >
<font-face
font-family="icons"
font-weight="400"
font-stretch="normal"
units-per-em="512"
panose-1="2 0 5 3 0 0 0 0 0 0"
ascent="448"
descent="-64"
bbox="51.2002 5.63184 460.8 374.272"
underline-thickness="25.6"
underline-position="-51.2"
unicode-range="U+0020-F102"
/>
<missing-glyph />
<glyph glyph-name="space" unicode=" " horiz-adv-x="200"
/>
<glyph glyph-name="uniF101" unicode="&#xf101;"
d="M343.04 342.528h-174.08l-87.04 -150.528l87.04 -150.528h174.08l87.04 150.528zM358.4 369.152v0l102.399 -177.152l-102.399 -177.152h-204.801l-102.399 177.152l102.399 177.152h204.801zM103.414 198.864l70.9287 121.041l22.9717 -13.4609l-70.9297 -121.041z
M312.359 306.462l22.9717 13.459l70.915 -121.041l-22.9707 -13.458zM185.726 85.8223l140.288 0.28418l0.0546875 -26.624l-140.288 -0.28418z" />
<glyph glyph-name="uniF100" unicode="&#xf100;"
d="M425.626 38.3486c1.89355 -3.32812 2.91797 -7.06543 2.96875 -10.9053v0c0 -12.0322 -9.77832 -21.8115 -21.8105 -21.8115h-297.421c-12.0322 0 -21.8115 9.7793 -21.8115 21.8115v0c0 3.78906 0.972656 7.57715 2.91895 10.9053l116.89 225.331v87.5527h-11.5205
c-6.34863 0 -11.5195 5.1709 -11.5195 11.5195v0c0 6.34863 5.1709 11.5205 11.5195 11.5205h124.416c6.34863 0 11.5205 -5.17188 11.5205 -11.5205v0c0 -6.34863 -5.17188 -11.5195 -11.5205 -11.5195h-11.5195v-87.5527zM230.4 259.072l-59.9043 -115.2
s50.9443 9.57422 87.5518 0c36.7617 -9.62598 87.5518 0 87.5518 0l-59.9033 115.2v92.1602h-55.2959v-92.1602z" />
<glyph glyph-name="uniF102" unicode="&#xf102;"
d="M390.86 314.368c18.2793 0 33.0752 -14.7969 33.0752 -33.0752v-182.682c0 -18.2783 -14.7959 -33.0752 -33.0752 -33.0752h-265.625c-18.2783 0 -33.0752 14.7969 -33.0752 33.0752v182.682c0 18.2783 14.7969 33.0752 33.0752 33.0752h265.625zM138.24 83.9678
c15.2578 0 27.6475 12.3906 27.6475 27.6484s-12.3896 27.6475 -27.6475 27.6475s-27.6484 -12.3896 -27.6484 -27.6475s12.3906 -27.6484 27.6484 -27.6484zM138.24 163.84c15.2578 0 27.6475 12.3906 27.6475 27.6484c0 15.2568 -12.3896 27.6475 -27.6475 27.6475
s-27.6484 -12.3906 -27.6484 -27.6475c0 -15.2578 12.3906 -27.6484 27.6484 -27.6484zM138.24 243.712c15.2578 0 27.6475 12.3906 27.6475 27.6484c0 15.2568 -12.3896 27.6475 -27.6475 27.6475s-27.6484 -12.3906 -27.6484 -27.6475
c0 -15.2578 12.3906 -27.6484 27.6484 -27.6484zM218.112 83.9678c15.2568 0 27.6475 12.3906 27.6475 27.6484s-12.3906 27.6475 -27.6475 27.6475c-15.2578 0 -27.6484 -12.3896 -27.6484 -27.6475s12.3906 -27.6484 27.6484 -27.6484zM218.112 163.84
c15.2568 0 27.6475 12.3906 27.6475 27.6484c0 15.2568 -12.3906 27.6475 -27.6475 27.6475c-15.2578 0 -27.6484 -12.3906 -27.6484 -27.6475c0 -15.2578 12.3906 -27.6484 27.6484 -27.6484zM218.112 243.712c15.2568 0 27.6475 12.3906 27.6475 27.6484
c0 15.2568 -12.3906 27.6475 -27.6475 27.6475c-15.2578 0 -27.6484 -12.3906 -27.6484 -27.6475c0 -15.2578 12.3906 -27.6484 27.6484 -27.6484zM297.984 83.9678c15.2568 0 27.6475 12.3906 27.6475 27.6484s-12.3906 27.6475 -27.6475 27.6475
c-15.2578 0 -27.6484 -12.3896 -27.6484 -27.6475s12.3906 -27.6484 27.6484 -27.6484zM297.984 163.84c15.2568 0 27.6475 12.3906 27.6475 27.6484c0 15.2568 -12.3906 27.6475 -27.6475 27.6475c-15.2578 0 -27.6484 -12.3906 -27.6484 -27.6475
c0 -15.2578 12.3906 -27.6484 27.6484 -27.6484zM297.984 243.712c15.2568 0 27.6475 12.3906 27.6475 27.6484c0 15.2568 -12.3906 27.6475 -27.6475 27.6475c-15.2578 0 -27.6484 -12.3906 -27.6484 -27.6475c0 -15.2578 12.3906 -27.6484 27.6484 -27.6484z
M377.856 83.9678c15.2568 0 27.6475 12.3906 27.6475 27.6484s-12.3906 27.6475 -27.6475 27.6475c-15.2578 0 -27.6484 -12.3896 -27.6484 -27.6475s12.3906 -27.6484 27.6484 -27.6484zM377.856 163.84c15.2568 0 27.6475 12.3906 27.6475 27.6484
c0 15.2568 -12.3906 27.6475 -27.6475 27.6475c-15.2578 0 -27.6484 -12.3906 -27.6484 -27.6475c0 -15.2578 12.3906 -27.6484 27.6484 -27.6484zM377.856 243.712c15.2568 0 27.6475 12.3906 27.6475 27.6484c0 15.2568 -12.3906 27.6475 -27.6475 27.6475
c-15.2578 0 -27.6484 -12.3906 -27.6484 -27.6475c0 -15.2578 12.3906 -27.6484 27.6484 -27.6484z" />
</font>
</defs></svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<path d="M831.3,800.1L603,360V189h22.5c12.4,0,22.5-10.1,22.5-22.5v0c0-12.4-10.1-22.5-22.5-22.5h-243c-12.4,0-22.5,10.1-22.5,22.5
v0c0,12.4,10.1,22.5,22.5,22.5H405v171L176.7,800.1c-3.8,6.5-5.7,13.9-5.7,21.3v0c0,23.5,19.1,42.6,42.6,42.6h580.9
c23.5,0,42.6-19.1,42.6-42.6v0C837,813.9,835,806.6,831.3,800.1z M450,369V189h108v180l117,225c0,0-99.2,18.8-171,0
c-71.5-18.7-171,0-171,0L450,369z"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<path d="M670,206l170,294L670,794H330L160,500l170-294H670 M700,154H300L100,500l200,346h400l200-346L700,154L700,154z"/>
<g>
<rect x="267.7" y="244.5" transform="matrix(0.8628 0.5056 -0.5056 0.8628 233.1618 -96.1184)" width="52" height="274"/>
<rect x="564.8" y="355.5" transform="matrix(0.5055 0.8628 -0.8628 0.5055 676.1617 -416.8599)" width="274" height="52"/>
<rect x="473.8" y="596.1" transform="matrix(2.028241e-03 1 -1 2.028241e-03 1231.8849 231.8142)" width="52" height="274"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<path d="M763.4,261H244.6c-35.7,0-64.6,28.9-64.6,64.6v356.8c0,35.7,28.9,64.6,64.6,64.6h518.8c35.7,0,64.6-28.9,64.6-64.6V325.6
C828,289.9,799.1,261,763.4,261z M270,711c-29.8,0-54-24.2-54-54s24.2-54,54-54s54,24.2,54,54S299.8,711,270,711z M270,555
c-29.8,0-54-24.2-54-54s24.2-54,54-54s54,24.2,54,54S299.8,555,270,555z M270,399c-29.8,0-54-24.2-54-54s24.2-54,54-54
s54,24.2,54,54S299.8,399,270,399z M426,711c-29.8,0-54-24.2-54-54s24.2-54,54-54s54,24.2,54,54S455.8,711,426,711z M426,555
c-29.8,0-54-24.2-54-54s24.2-54,54-54s54,24.2,54,54S455.8,555,426,555z M426,399c-29.8,0-54-24.2-54-54s24.2-54,54-54
s54,24.2,54,54S455.8,399,426,399z M582,711c-29.8,0-54-24.2-54-54s24.2-54,54-54s54,24.2,54,54S611.8,711,582,711z M582,555
c-29.8,0-54-24.2-54-54s24.2-54,54-54s54,24.2,54,54S611.8,555,582,555z M582,399c-29.8,0-54-24.2-54-54s24.2-54,54-54
s54,24.2,54,54S611.8,399,582,399z M738,711c-29.8,0-54-24.2-54-54s24.2-54,54-54s54,24.2,54,54S767.8,711,738,711z M738,555
c-29.8,0-54-24.2-54-54s24.2-54,54-54s54,24.2,54,54S767.8,555,738,555z M738,399c-29.8,0-54-24.2-54-54s24.2-54,54-54
s54,24.2,54,54S767.8,399,738,399z"/>
</svg>
......@@ -8,15 +8,17 @@ export default class List extends React.Component {
}
render() {
var samples = <i className="icon-sample"></i>,
reactions = <i className="icon-reaction"></i>,
wellplates = <i className="icon-wellplate"></i>;
return (
<TabbedArea defaultActiveKey={1}>
<TabPane eventKey={1} tab='Samples'>
<TabPane eventKey={1} tab={samples}>
<ElementsTable type='sample'/>
</TabPane>
<TabPane eventKey={2} tab='Reactions' disabled>TabPane 2 content</TabPane>
<TabPane eventKey={3} tab='Wellplates' disabled>TabPane 3 content</TabPane>
<TabPane eventKey={2} tab={reactions} disabled>TabPane 2 content</TabPane>
<TabPane eventKey={3} tab={wellplates} disabled>TabPane 3 content</TabPane>
</TabbedArea>
)
}
}
//
// Icon Font: icons
//
@font-face {
font-family: "icons";
src: url("icons.eot");
src: url("icons.eot?#iefix") format("embedded-opentype"),
url("icons.woff") format("woff"),
url("icons.ttf") format("truetype"),
url("icons.svg#icons") format("svg");
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: "icons";
src: url("icons.svg#icons") format("svg");
}
}
[data-icon]:before { content: attr(data-icon); }
[data-icon]:before,
.icon-reaction:before,
.icon-sample:before,
.icon-wellplate:before {
display: inline-block;
font-family: "icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
text-decoration: inherit;
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.icon-reaction:before { content: "\f100"; }
.icon-sample:before { content: "\f101"; }
.icon-wellplate:before { content: "\f102"; }
$font-icons-reaction: "\f100";
$font-icons-sample: "\f101";
$font-icons-wellplate: "\f102";
......@@ -16,7 +16,7 @@
@import "bootstrap-sprockets";
@import "bootstrap";
@import "icons";
/*
Show Bootstrap Grid as overlay for debugging
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment