root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Embedding icons into markup

Browse Source
This commit is contained in:
Jeff Avallone
2016-03-10 16:53:54 -05:00
parent e7aa0bb533
commit 5f9a8ddfc1
15 changed files with 49 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/images/open-iconic/code.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
<path d="M5 0l-3 6h1l3-6h-1zm-4 1l-1 2 1 2h1l-1-2 1-2h-1zm5 0l1 2-1 2h1l1-2-1-2h-1z" transform="translate(0 1)" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 203 B

src/images/open-iconic/data-transfer-download.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
<path d="M3 0v3h-2l3 3 3-3h-2v-3h-2zm-3 7v1h8v-1h-8z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 145 B

src/images/open-iconic/document.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
<path d="M0 0v8h7v-4h-4v-4h-3zm4 0v3h3l-3-3zm-3 2h1v1h-1v-1zm0 2h1v1h-1v-1zm0 2h4v1h-4v-1z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 183 B

src/images/open-iconic/link-intact.svg
-4
View File
@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
<path d="M5.88.03c-.18.01-.36.03-.53.09-.27.1-.53.25-.75.47a.5.5 0 1 0 .69.69c.11-.11.24-.17.38-.22.35-.12.78-.07 1.06.22.39.39.39 1.04 0 1.44l-1.5 1.5c-.44.44-.8.48-1.06.47-.26-.01-.41-.13-.41-.13a.5.5 0 1 0-.5.88s.34.22.84.25c.5.03 1.2-.16 1.81-.78l1.5-1.5c.78-.78.78-2.04 0-2.81-.28-.28-.61-.45-.97-.53-.18-.04-.38-.04-.56-.03zm-2 2.31c-.5-.02-1.19.15-1.78.75l-1.5 1.5c-.78.78-.78 2.04 0 2.81.56.56 1.36.72 2.06.47.27-.1.53-.25.75-.47a.5.5 0 1 0-.69-.69c-.11.11-.24.17-.38.22-.35.12-.78.07-1.06-.22-.39-.39-.39-1.04 0-1.44l1.5-1.5c.4-.4.75-.45 1.03-.44.28.01.47.09.47.09a.5.5 0 1 0 .44-.88s-.34-.2-.84-.22z"
/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 704 B

src/images/open-iconic/list-rich.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
<path d="M0 0v3h3v-3h-3zm4 0v1h4v-1h-4zm0 2v1h3v-1h-3zm-4 2v3h3v-3h-3zm4 0v1h4v-1h-4zm0 2v1h3v-1h-3z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 193 B

src/images/open-iconic/warning.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
<path d="M3.09 0c-.06 0-.1.04-.13.09l-2.94 6.81c-.02.05-.03.13-.03.19v.81c0 .05.04.09.09.09h6.81c.05 0 .09-.04.09-.09v-.81c0-.05-.01-.14-.03-.19l-2.94-6.81c-.02-.05-.07-.09-.13-.09h-.81zm-.09 3h1v2h-1v-2zm0 3h1v1h-1v-1z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 312 B

src/index.hbs
+2 -2
View File
@@ -7,10 +7,10 @@
<ul class="inline-list">
<li class="download">
<a href="#" class="inline-icon" data-action="download" download="image.svg" type="image/svg+xml"><img alt="" src="/images/open-iconic/data-transfer-download.svg">Download</a>
<a href="#" class="inline-icon" data-action="download" download="image.svg" type="image/svg+xml">{{icon "#data-transfer-download"}}Download</a>
</li>
<li class="permalink">
<a href="#" class="inline-icon" data-action="permalink"><img alt="" src="/images/open-iconic/link-intact.svg">Permalink</a>
<a href="#" class="inline-icon" data-action="permalink">{{icon "#link-intact"}}Permalink</a>
</li>
</ul>
</form>
src/js/regexper.js
+1 -1
View File
@@ -184,7 +184,7 @@ export default class Regexper {
// - __warnings__ - Array of warning messages to display.
displayWarnings(warnings) {
this.warnings.innerHTML = _.map(warnings, warning => {
return `<li class="inline-icon"><img alt="" src="/images/open-iconic/warning.svg">${warning}</li>`;
return `<li class="inline-icon">${util.icon("#warning")}${warning}</li>`;
}).join('');
}
src/js/util.js
+6 -1
View File
@@ -124,6 +124,10 @@ function exposeError(error) {
}, 0);
}
function icon(selector) {
return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 8"><use xlink:href="${selector}" /></svg>`;
}
export default {
customEvent,
normalizeBBox,
@@ -131,5 +135,6 @@ export default {
spaceVertically,
wait,
tick,
exposeError
exposeError,
icon
};
src/sass/main.scss
+1 -1
View File
@@ -15,7 +15,7 @@ a {
}
.inline-icon {
img {
svg {
margin-right: rhythm(1/4);
width: 1em;
height: 1em;
src/sass/svg.scss
+4
View File
@@ -1,5 +1,9 @@
@import 'base';
#open-iconic {
display: none;
}
svg.regexp-svg {
background-color: $white;