status-im
/
codimd
mirror of https://github.com/status-im/codimd.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add css, make fretboardSVG.js to separate svg files 

Signed-off-by: Ca Chen <kiancaca@gmail.com>
This commit is contained in:
Ca Chen 2020-04-02 20:43:56 +08:00
parent 2ea3e59842
commit 370423aefc
23 changed files with 332 additions and 385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
package-lock.json generated
View File

@ -14692,6 +14692,12 @@
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
"dev": true
},
"simple-html-tokenizer": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz",
"integrity": "sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4=",
"dev": true
},
"simple-swizzle": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@ -15397,16 +15403,6 @@
"boundary": "^1.0.1"
}
},
"style-loader": {
"version": "0.23.1",
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz",
"integrity": "sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==",
"dev": true,
"requires": {
"loader-utils": "^1.1.0",
"schema-utils": "^1.0.0"
}
},
"stylehacks": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@ -15462,6 +15458,17 @@
"has-flag": "^3.0.0"
}
},
"svg-inline-loader": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/svg-inline-loader/-/svg-inline-loader-0.8.2.tgz",
"integrity": "sha512-kbrcEh5n5JkypaSC152eGfGcnT4lkR0eSfvefaUJkLqgGjRQJyKDvvEE/CCv5aTSdfXuc+N98w16iAojhShI3g==",
"dev": true,
"requires": {
"loader-utils": "^1.1.0",
"object-assign": "^4.0.1",
"simple-html-tokenizer": "^0.1.1"
}
},
"svgo": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",

1
public/vendor/fretboard/css/i.css vendored Normal file
View File

@ -0,0 +1 @@
*{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{color:#555;font-family:"Helvetica Neue",sans-serif;font-size:16px;background:#eee;line-height:1.4}a{color:#f05a28}h1,h2,h3,h4,h5,h6{color:#444;margin:0 0 20px 0}h1{font-size:40px}h2{font-size:32px;margin:0 0 12px 0}h3{font-size:24px;margin:40px 0 10px 0}h4{font-size:21px}h5{font-size:18px}h6{font-size:18px}.title{color:#555;font-family:"Helvetica Neue",sans-serif;background:#eee;line-height:1.4;font-size:24px;margin:10px 0 10px 0;font-weight:900}p{margin:20px 0 20px 0}ul,ol{margin:0 0 20px 28px;padding:0}dl{margin:0 0 20px 0}dl dt{font-weight:bold;color:#444;margin-bottom:4px}dl dd{margin-bottom:0px;margin-left:24px}pre,code{font-size:15px;line-height:20px;font-family:"Andale Mono",monospace}pre{overflow:auto;margin:0 0 20px 0;padding:20px;border-radius:6px;background:#eee}code{display:inline-block;white-space:nowrap;padding:2px 6px;border-radius:3px;background:#f4f4f4}table{border-collapse:collapse;table-layout:fixed;width:100%;margin:0 0 20px 0}td,th{padding:8px 9px 7px;font-size:14px;line-height:17px;border:1px solid #aaa;text-align:left}th{background:#eee}td{font-size:13px;background:#fff}section{padding:20px}.content{max-width:960px;margin:auto}.container{width:288px;margin:0 auto}.container_h{max-width:576px;margin:0 auto}@media all and (max-width: 383px){.container_h{max-width:288px}}@media all and (max-width: 576px){.container_h{width:384px}}.svg_wrapper{background-color:#fff;position:relative;height:0}.svg_wrapper svg.fretboard_bg{position:absolute;top:0;left:0;z-index:0}.svg_wrapper .cells{width:100%;height:100%;position:absolute;top:0;left:0;z-index:10}.svg_wrapper.v4{padding-top:91.6666666667%}.svg_wrapper.v5{padding-top:106.9444444444%}.svg_wrapper.v7{padding-top:137.5%}.svg_wrapper.v9{padding-top:168.0555555556%}.svg_wrapper.v12{padding-top:213.8888888889%}.svg_wrapper.v15{padding-top:259.7222222222%}.svg_wrapper.v .cell svg{width:12.5%;float:left;display:block}.svg_wrapper.v4 .cell svg{height:16.6666666667%}.svg_wrapper.v5 .cell svg{height:14.2857142857%}.svg_wrapper.v7 .cell svg{height:11.1111111111%}.svg_wrapper.v9 .cell svg{height:9.0909090909%}.svg_wrapper.v12 .cell svg{height:7.1428571429%}.svg_wrapper.v15 .cell svg{height:5.8823529412%}.svg_wrapper.h5{padding-top:85.7142857143%}.svg_wrapper.h6{padding-top:75%}.svg_wrapper.h7{padding-top:72.7272727273%}.svg_wrapper.h .cell svg{height:12.5%;float:left;display:block;z-index:2}.svg_wrapper.h5 .cell svg{width:14.2857142857%}.svg_wrapper.h6 .cell svg{width:12.5%}.svg_wrapper.h7 .cell svg{width:12.1212121212%}.cell.dot .fretb_dot{fill:#27a9e1}.cell.dot.root .fretb_dot{fill:#f05a28}.cell.dot.faded .fretb_dot{opacity:.25}.fretboard_bg .fret_bg rect{fill:#fff}.fretboard_bg .frets rect{fill:#ddd}.fretboard_bg .nut rect{fill:#6e6e6e}.fretboard_bg .strings rect{fill:#6e6e6e}.svg_wrapper.noNut .fretboard_bg .nut rect{fill:none}/*# sourceMappingURL=i.css.map */

111
public/vendor/fretboard/fretboard.js vendored
View File

@ -1,23 +1,13 @@
import {
dotEmpty,
dotEmpty_h,
dot,
dot_h,
dotWideLeft,
dotWideRight,
dotWideMiddle,
string_o,
string_x,
fretb_vert_4,
fretb_vert_5,
fretb_vert_7,
fretb_vert_9,
fretb_vert_12,
fretb_vert_15,
fretb_horiz_5,
fretb_horiz_6,
fretb_horiz_7,
} from './fretboardSVG.js'
import dotEmpty from './svg/dotEmpty.svg'
import dotEmpty_h from './svg/dotEmpty_h.svg'
import dot from './svg/dot.svg'
import dot_h from './svg/dot_h.svg'
import dotWideLeft from './svg/dotWideLeft.svg'
import dotWideRight from './svg/dotWideRight.svg'
import dotWideMiddle from './svg/dotWideMiddle.svg'
import string_o from './svg/string_o.svg'
import string_x from './svg/string_x.svg'
import './css/i.css'
const switchList_v = {
'o': `<div class='cell dot'>${dot}</div>`,
@ -38,68 +28,51 @@ const switchList_h = {
' ': `<div class='cell empty'>${dotEmpty_h}</div>`
}
export const renderFretBoard = (content) => {
let getArgument = (argName, content) => {
let lineOfContent = content.data.split('\n')
let argv = ''
let indexOfArg = ''
let idx = ''
for (idx in lineOfContent) {
if (lineOfContent[idx].startsWith(argName)) {
argv = lineOfContent[idx].split(argName)[1].trim()
break
}
}
lineOfContent.splice(idx, 1)
content.data = lineOfContent.join('\n')
return argv
}
export const renderFretBoard = (data) => {
let fretboardHTML = $('<div class="fretboard_instance"></div>')
if (content.includes('title:')) {
const getTitle = content.split('\n', 1)[0].split('title:')[1].trim()
$(fretboardHTML).append($(`<div class="title">${getTitle}</div>`))
content = content.split('\n').slice(1).join('\n')
}
let fretType = ''
if (content.startsWith('type:')) {
fretType = content.split('\n', 1)[0].split('type:')[1].trim().split(' ')
content = content.split('\n').slice(1).join('\n')
}
// parsing arguments
let content = { 'data': data }
let getTitle = getArgument('title:', content)
let fretType = getArgument('type:', content).split(' ')
content = content.data
let fretb_orientation = fretType[0].startsWith('v') ? 'vert' : 'horiz'
let fretb_len = fretType[0].substring(1)
// TODO: to get svg dynamically
let fretb_bg = ''
switch (fretb_len) {
case '4':
fretb_bg = fretb_vert_4
break
case '5':
if (fretb_orientation === 'vert')
fretb_bg = fretb_vert_5
else
fretb_bg = fretb_horiz_5
break
case '6':
fretb_bg = fretb_horiz_6
break
case '7':
if (fretb_orientation === 'vert')
fretb_bg = fretb_vert_7
else
fretb_bg = fretb_horiz_7
break
case '9':
fretb_bg = fretb_vert_9
break
case '12':
fretb_bg = fretb_vert_12
break
case '15':
fretb_bg = fretb_vert_15
break
}
$(fretboardHTML).append($(`<div class="title">${getTitle}</div>`))
// create fretboard background HTML
let fretb_class = fretType[0][0] + ' ' + fretType[0]
let fretb_orientation = fretType && fretType[0].startsWith('v') ? 'vert' : 'horiz'
let fretb_len = fretType && fretType[0].substring(1)
let fretb_class = fretType && fretType[0][0] + ' ' + fretType[0]
let nut = (fretType[1] && fretType[1] === 'noNut')?'noNut':''
let svgHTML = $(`<div class="svg_wrapper ${fretb_class} ${nut}"></div>`)
let fretb_bg = require(`./svg/fretb_${fretb_orientation}_${fretb_len}.svg`)
$(svgHTML).append($(fretb_bg))
// create cells HTML
let cellsHTML = $('<div class="cells"></div>')
let switchList = fretb_orientation === 'vert' ? switchList_v : switchList_h
let contentCell = content.split('')
let switchList = fretb_orientation && fretb_orientation === 'vert' ? switchList_v : switchList_h
let contentCell = content && content.split('')
// Go through each ASCII character...
contentCell.forEach(char => {
contentCell && contentCell.forEach(char => {
if (switchList[char] !== undefined) {
cellsHTML.append($(switchList[char]));
}

306
public/vendor/fretboard/fretboardSVG.js vendored
View File

@ -1,306 +0,0 @@
const dotEmpty = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">\
<circle class="fretb_dot_empty" fill="none" cx="36" cy="44" r="32"/>\
</svg>';
const dotEmpty_h = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96 72" enable-background="new 0 0 96 72" xml:space="preserve">\
<circle class="fretb_dot_empty" fill="none" cx="48" cy="36" r="32"/>\
</svg>';
const dot = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">\
<circle class="fretb_dot" fill="#27AAE1" cx="36" cy="44" r="32"/>\
</svg>';
const dot_h = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96 72" enable-background="new 0 0 96 72" xml:space="preserve">\
<circle class="fretb_dot dot_h" fill="#27AAE1" cx="48" cy="36" r="32"/>\
</svg>';
const dotWideLeft = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">\
<path fill="#27AAE1" d="M36,16C20.537,16,8,28.537,8,44s12.537,28,28,28v0.125h36V16H36z"/>\
</svg>';
const dotWideRight = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">\
<path fill="#27AAE1" d="M36,72.125c15.463,0,28-12.537,28-28s-12.537-28-28-28V16H0l0,56.125H36z"/>\
</svg>';
const dotWideMiddle = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">\
<rect y="16" fill="#27AAE1" width="72" height="56"/>\
</svg>';
const string_o = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">\
<path fill="#27AAE1" d="M36,21c6.065,0,11,4.935,11,11s-4.935,11-11,11s-11-4.935-11-11S29.935,21,36,21 M36,14c-9.94,0-18,8.06-18,18s8.06,18,18,18s18-8.06,18-18S45.94,14,36,14L36,14z"/>\
</svg>';
const string_x = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">\
<path fill="#27AAE1" d="M51.067,41.831L41.236,32l9.831-9.831c-1.365-2.087-3.149-3.871-5.236-5.236L36,26.764l-9.831-9.831c-2.087,1.365-3.871,3.149-5.236,5.236L30.764,32l-9.831,9.831c1.365,2.087,3.149,3.871,5.236,5.236L36,37.236l9.831,9.831C47.918,45.702,49.702,43.918,51.067,41.831z"/>\
</svg>';
const fretb_vert_4 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 528" enable-background="new 0 0 576 528" xml:space="preserve">\
<g class="fret_bg">\
<rect x="102" y="72" fill="#FFFFFF" width="372" height="384"/>\
</g>\
<g class="frets">\
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>\
</g>\
<g class="strings">\
<rect x="102" y="72" width="12" height="384"/>\
<rect x="174" y="72" width="12" height="384"/>\
<rect x="246" y="72" width="12" height="384"/>\
<rect x="318" y="72" width="12" height="384"/>\
<rect x="390" y="72" width="12" height="384"/>\
<rect x="462" y="72" width="12" height="384"/>\
</g>\
<g class="nut">\
<rect x="102" y="72" width="368" height="20"/>\
</g>\
</svg>';
const fretb_vert_5 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 616" enable-background="new 0 0 576 616" xml:space="preserve">\
<g class="fret_bg">\
<rect x="102" y="72" fill="#FFFFFF" width="372" height="472"/>\
</g>\
<g class="frets">\
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>\
</g>\
<g class="strings">\
<rect x="102" y="72" width="12" height="472"/>\
<rect x="174" y="72" width="12" height="472"/>\
<rect x="246" y="72" width="12" height="472"/>\
<rect x="318" y="72" width="12" height="472"/>\
<rect x="390" y="72" width="12" height="472"/>\
<rect x="462" y="72" width="12" height="472"/>\
</g>\
<g class="nut">\
<rect x="102" y="72" width="368" height="20"/>\
</g>\
</svg>';
const fretb_vert_7 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 792" enable-background="new 0 0 576 792" xml:space="preserve">\
<g class="fret_bg">\
<rect x="102" y="71" fill="#FFFFFF" width="372" height="649"/>\
</g>\
<g class="frets">\
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>\
</g>\
<g class="strings">\
<rect x="102" y="72" width="12" height="648"/>\
<rect x="174" y="72" width="12" height="648"/>\
<rect x="246" y="72" width="12" height="648"/>\
<rect x="318" y="72" width="12" height="648"/>\
<rect x="390" y="72" width="12" height="648"/>\
<rect x="462" y="72" width="12" height="648"/>\
</g>\
<g class="nut">\
<rect x="102" y="72" width="368" height="20"/>\
</g>\
</svg>';
const fretb_vert_9 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 968" enable-background="new 0 0 576 968" xml:space="preserve">\
<g class="fret_bg">\
<rect x="102" y="72" fill="#FFFFFF" width="372" height="824"/>\
</g>\
<g class="frets">\
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="788" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="876" fill="#C7C8CA" width="360" height="8"/>\
</g>\
<g class="strings">\
<rect x="102" y="72" width="12" height="824"/>\
<rect x="174" y="72" width="12" height="824"/>\
<rect x="246" y="72" width="12" height="824"/>\
<rect x="318" y="72" width="12" height="824"/>\
<rect x="390" y="72" width="12" height="824"/>\
<rect x="462" y="72" width="12" height="824"/>\
</g>\
<g class="nut">\
<rect x="102" y="72" width="368" height="20"/>\
</g>\
</svg>';
const fretb_vert_12 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 1232" enable-background="new 0 0 576 1232" xml:space="preserve">\
<g class="fret_bg">\
<rect x="102" y="72" fill="#FFFFFF" width="372" height="1088"/>\
</g>\
<g class="frets">\
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="788" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="876" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="964" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="1052" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="1140" fill="#C7C8CA" width="360" height="8"/>\
</g>\
<g class="strings">\
<rect x="102" y="72" width="12" height="1088"/>\
<rect x="174" y="72" width="12" height="1088"/>\
<rect x="246" y="72" width="12" height="1088"/>\
<rect x="318" y="72" width="12" height="1088"/>\
<rect x="390" y="72" width="12" height="1088"/>\
<rect x="462" y="72" width="12" height="1088"/>\
</g>\
<g class="nut">\
<rect x="104" y="72" width="368" height="20"/>\
</g>\
</svg>';
const fretb_vert_15 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 1496" enable-background="new 0 0 576 1496" xml:space="preserve">\
<g class="fret_bg">\
<rect x="102" y="72" fill="#FFFFFF" width="372" height="1352"/>\
</g>\
<g class="frets">\
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="788" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="876" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="964" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="1052" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="1140" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="1228" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="1316" fill="#C7C8CA" width="360" height="8"/>\
<rect x="108" y="1404" fill="#C7C8CA" width="360" height="8"/>\
</g>\
<g class="strings">\
<rect x="102" y="72" width="12" height="1352"/>\
<rect x="174" y="72" width="12" height="1352"/>\
<rect x="246" y="72" width="12" height="1352"/>\
<rect x="318" y="72" width="12" height="1352"/>\
<rect x="390" y="72" width="12" height="1352"/>\
<rect x="462" y="72" width="12" height="1352"/>\
</g>\
<g class="nut">\
<rect x="104" y="72" width="368" height="20"/>\
</g>\
</svg>';
const fretb_horiz_5 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 672 576" enable-background="new 0 0 672 576" xml:space="preserve">\
<g class="fret_bg">\
<rect x="78" y="102" fill="#FFFFFF" width="512" height="372"/>\
</g>\
<g class="frets">\
<rect x="92" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="188" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="284" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="380" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="476" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="572" y="108" fill="#C7C8CA" width="8" height="360"/>\
</g>\
<g class="strings">\
<rect x="78" y="102" width="512" height="12"/>\
<rect x="78" y="174" width="512" height="12"/>\
<rect x="78" y="246" width="512" height="12"/>\
<rect x="78" y="318" width="512" height="12"/>\
<rect x="78" y="390" width="512" height="12"/>\
<rect x="78" y="462" width="512" height="12"/>\
</g>\
<g class="nut">\
<rect x="78" y="102" width="22" height="372"/>\
</g>\
</svg>';
const fretb_horiz_6 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 768 576" enable-background="new 0 0 768 576" xml:space="preserve">\
<g class="fret_bg">\
<rect x="78" y="102" fill="#FFFFFF" width="608" height="372"/>\
</g>\
<g class="frets">\
<rect x="92" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="188" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="284" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="380" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="476" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="572" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="668" y="108" fill="#C7C8CA" width="8" height="360"/>\
</g>\
<g class="strings">\
<rect x="78" y="102" width="608" height="12"/>\
<rect x="78" y="174" width="608" height="12"/>\
<rect x="78" y="246" width="608" height="12"/>\
<rect x="78" y="318" width="608" height="12"/>\
<rect x="78" y="390" width="608" height="12"/>\
<rect x="78" y="462" width="608" height="12"/>\
</g>\
<g class="nut">\
<rect x="78" y="102" width="22" height="372"/>\
</g>\
</svg>';
var fretb_horiz_7 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 792 576" enable-background="new 0 0 792 576" xml:space="preserve">\
<g class="fret_bg">\
<rect x="72" y="102" fill="#FFFFFF" width="648" height="372"/>\
</g>\
<g class="frets">\
<rect x="84" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="172" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="260" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="348" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="436" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="524" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="612" y="108" fill="#C7C8CA" width="8" height="360"/>\
<rect x="700" y="108" fill="#C7C8CA" width="8" height="360"/>\
</g>\
<g class="strings">\
<rect x="72" y="462" width="648" height="12"/>\
<rect x="72" y="390" width="648" height="12"/>\
<rect x="72" y="318" width="648" height="12"/>\
<rect x="72" y="246" width="648" height="12"/>\
<rect x="72" y="174" width="648" height="12"/>\
<rect x="72" y="102" width="648" height="12"/>\
</g>\
<g class="nut">\
<rect x="72" y="106" width="20" height="368"/>\
</g>\
</svg>';
module.exports = {
dotEmpty,
dotEmpty_h,
dot,
dot_h,
dotWideLeft,
dotWideRight,
dotWideMiddle,
string_o,
string_x,
fretb_vert_4,
fretb_vert_5,
fretb_vert_7,
fretb_vert_9,
fretb_vert_12,
fretb_vert_15,
fretb_horiz_5,
fretb_horiz_6,
fretb_horiz_7,
}

3
public/vendor/fretboard/svg/dot.svg vendored Normal file
View File

@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">
<circle class="fretb_dot" fill="#27AAE1" cx="36" cy="44" r="32"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 300 B

3
public/vendor/fretboard/svg/dotEmpty.svg vendored Normal file
View File

@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">
<circle class="fretb_dot_empty" fill="none" cx="36" cy="44" r="32"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 303 B

3
public/vendor/fretboard/svg/dotEmpty_h.svg vendored Normal file
View File

@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96 72" enable-background="new 0 0 96 72" xml:space="preserve">
<circle class="fretb_dot_empty" fill="none" cx="48" cy="36" r="32"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 303 B

3
public/vendor/fretboard/svg/dotWideLeft.svg vendored Normal file
View File

@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">
<path fill="#27AAE1" d="M36,16C20.537,16,8,28.537,8,44s12.537,28,28,28v0.125h36V16H36z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 287 B

3
public/vendor/fretboard/svg/dotWideMiddle.svg vendored Normal file
View File

@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">
<rect y="16" fill="#27AAE1" width="72" height="56"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 250 B

3
public/vendor/fretboard/svg/dotWideRight.svg vendored Normal file
View File

@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">
<path fill="#27AAE1" d="M36,72.125c15.463,0,28-12.537,28-28s-12.537-28-28-28V16H0l0,56.125H36z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 295 B

3
public/vendor/fretboard/svg/dot_h.svg vendored Normal file
View File

@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96 72" enable-background="new 0 0 96 72" xml:space="preserve">
<circle class="fretb_dot dot_h" fill="#27AAE1" cx="48" cy="36" r="32"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 305 B

24
public/vendor/fretboard/svg/fretb_horiz_5.svg vendored Normal file
View File

@ -0,0 +1,24 @@
<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 672 576" enable-background="new 0 0 672 576" xml:space="preserve">
<g class="fret_bg">
<rect x="78" y="102" fill="#FFFFFF" width="512" height="372"/>
</g>
<g class="frets">
<rect x="92" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="188" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="284" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="380" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="476" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="572" y="108" fill="#C7C8CA" width="8" height="360"/>
</g>
<g class="strings">
<rect x="78" y="102" width="512" height="12"/>
<rect x="78" y="174" width="512" height="12"/>
<rect x="78" y="246" width="512" height="12"/>
<rect x="78" y="318" width="512" height="12"/>
<rect x="78" y="390" width="512" height="12"/>
<rect x="78" y="462" width="512" height="12"/>
</g>
<g class="nut">
<rect x="78" y="102" width="22" height="372"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

25
public/vendor/fretboard/svg/fretb_horiz_6.svg vendored Normal file
View File

@ -0,0 +1,25 @@
<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 768 576" enable-background="new 0 0 768 576" xml:space="preserve">
<g class="fret_bg">
<rect x="78" y="102" fill="#FFFFFF" width="608" height="372"/>
</g>
<g class="frets">\
<rect x="92" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="188" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="284" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="380" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="476" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="572" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="668" y="108" fill="#C7C8CA" width="8" height="360"/>
</g>
<g class="strings">
<rect x="78" y="102" width="608" height="12"/>
<rect x="78" y="174" width="608" height="12"/>
<rect x="78" y="246" width="608" height="12"/>
<rect x="78" y="318" width="608" height="12"/>
<rect x="78" y="390" width="608" height="12"/>
<rect x="78" y="462" width="608" height="12"/>
</g>
<g class="nut">
<rect x="78" y="102" width="22" height="372"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

26
public/vendor/fretboard/svg/fretb_horiz_7.svg vendored Normal file
View File

@ -0,0 +1,26 @@
<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 792 576" enable-background="new 0 0 792 576" xml:space="preserve">
<g class="fret_bg">
<rect x="72" y="102" fill="#FFFFFF" width="648" height="372"/>
</g>
<g class="frets">
<rect x="84" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="172" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="260" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="348" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="436" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="524" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="612" y="108" fill="#C7C8CA" width="8" height="360"/>
<rect x="700" y="108" fill="#C7C8CA" width="8" height="360"/>
</g>
<g class="strings">
<rect x="72" y="462" width="648" height="12"/>
<rect x="72" y="390" width="648" height="12"/>
<rect x="72" y="318" width="648" height="12"/>
<rect x="72" y="246" width="648" height="12"/>
<rect x="72" y="174" width="648" height="12"/>
<rect x="72" y="102" width="648" height="12"/>
</g>
<g class="nut">
<rect x="72" y="106" width="20" height="368"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

31
public/vendor/fretboard/svg/fretb_vert_12.svg vendored Normal file
View File

@ -0,0 +1,31 @@
<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 1232" enable-background="new 0 0 576 1232" xml:space="preserve">
<g class="fret_bg">
<rect x="102" y="72" fill="#FFFFFF" width="372" height="1088"/>
</g>
<g class="frets">
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="788" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="876" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="964" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="1052" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="1140" fill="#C7C8CA" width="360" height="8"/>
</g>
<g class="strings">
<rect x="102" y="72" width="12" height="1088"/>
<rect x="174" y="72" width="12" height="1088"/>
<rect x="246" y="72" width="12" height="1088"/>
<rect x="318" y="72" width="12" height="1088"/>
<rect x="390" y="72" width="12" height="1088"/>
<rect x="462" y="72" width="12" height="1088"/>
</g>
<g class="nut">
<rect x="104" y="72" width="368" height="20"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

34
public/vendor/fretboard/svg/fretb_vert_15.svg vendored Normal file
View File

@ -0,0 +1,34 @@
<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 1496" enable-background="new 0 0 576 1496" xml:space="preserve">
<g class="fret_bg">
<rect x="102" y="72" fill="#FFFFFF" width="372" height="1352"/>
</g>
<g class="frets">
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="788" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="876" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="964" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="1052" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="1140" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="1228" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="1316" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="1404" fill="#C7C8CA" width="360" height="8"/>
</g>
<g class="strings">
<rect x="102" y="72" width="12" height="1352"/>
<rect x="174" y="72" width="12" height="1352"/>
<rect x="246" y="72" width="12" height="1352"/>
<rect x="318" y="72" width="12" height="1352"/>
<rect x="390" y="72" width="12" height="1352"/>
<rect x="462" y="72" width="12" height="1352"/>
</g>
<g class="nut">
<rect x="104" y="72" width="368" height="20"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

23
public/vendor/fretboard/svg/fretb_vert_4.svg vendored Normal file
View File

@ -0,0 +1,23 @@
<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 528" enable-background="new 0 0 576 528" xml:space="preserve">
<g class="fret_bg">
<rect x="102" y="72" fill="#FFFFFF" width="372" height="384"/>
</g>
<g class="frets">
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>
</g>
<g class="strings">
<rect x="102" y="72" width="12" height="384"/>
<rect x="174" y="72" width="12" height="384"/>
<rect x="246" y="72" width="12" height="384"/>
<rect x="318" y="72" width="12" height="384"/>
<rect x="390" y="72" width="12" height="384"/>
<rect x="462" y="72" width="12" height="384"/>
</g>
<g class="nut">
<rect x="102" y="72" width="368" height="20"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

24
public/vendor/fretboard/svg/fretb_vert_5.svg vendored Normal file
View File

@ -0,0 +1,24 @@
<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 616" enable-background="new 0 0 576 616" xml:space="preserve">
<g class="fret_bg">
<rect x="102" y="72" fill="#FFFFFF" width="372" height="472"/>
</g>
<g class="frets">
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>
</g>
<g class="strings">
<rect x="102" y="72" width="12" height="472"/>
<rect x="174" y="72" width="12" height="472"/>
<rect x="246" y="72" width="12" height="472"/>
<rect x="318" y="72" width="12" height="472"/>
<rect x="390" y="72" width="12" height="472"/>
<rect x="462" y="72" width="12" height="472"/>
</g>
<g class="nut">
<rect x="102" y="72" width="368" height="20"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

26
public/vendor/fretboard/svg/fretb_vert_7.svg vendored Normal file
View File

@ -0,0 +1,26 @@
<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 792" enable-background="new 0 0 576 792" xml:space="preserve">
<g class="fret_bg">
<rect x="102" y="71" fill="#FFFFFF" width="372" height="649"/>
</g>
<g class="frets">
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>
</g>
<g class="strings">
<rect x="102" y="72" width="12" height="648"/>
<rect x="174" y="72" width="12" height="648"/>
<rect x="246" y="72" width="12" height="648"/>
<rect x="318" y="72" width="12" height="648"/>
<rect x="390" y="72" width="12" height="648"/>
<rect x="462" y="72" width="12" height="648"/>
</g>
<g class="nut">
<rect x="102" y="72" width="368" height="20"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

28
public/vendor/fretboard/svg/fretb_vert_9.svg vendored Normal file
View File

@ -0,0 +1,28 @@
<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 968" enable-background="new 0 0 576 968" xml:space="preserve">\
<g class="fret_bg">
<rect x="102" y="72" fill="#FFFFFF" width="372" height="824"/>
</g>
<g class="frets">
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="788" fill="#C7C8CA" width="360" height="8"/>
<rect x="108" y="876" fill="#C7C8CA" width="360" height="8"/>
</g>
<g class="strings">
<rect x="102" y="72" width="12" height="824"/>
<rect x="174" y="72" width="12" height="824"/>
<rect x="246" y="72" width="12" height="824"/>
<rect x="318" y="72" width="12" height="824"/>
<rect x="390" y="72" width="12" height="824"/>
<rect x="462" y="72" width="12" height="824"/>
</g>
<g class="nut">
<rect x="102" y="72" width="368" height="20"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

3
public/vendor/fretboard/svg/string_o.svg vendored Normal file
View File

@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">
<path fill="#27AAE1" d="M36,21c6.065,0,11,4.935,11,11s-4.935,11-11,11s-11-4.935-11-11S29.935,21,36,21 M36,14c-9.94,0-18,8.06-18,18s8.06,18,18,18s18-8.06,18-18S45.94,14,36,14L36,14z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 381 B

3
public/vendor/fretboard/svg/string_x.svg vendored Normal file
View File

@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">
<path fill="#27AAE1" d="M51.067,41.831L41.236,32l9.831-9.831c-1.365-2.087-3.149-3.871-5.236-5.236L36,26.764l-9.831-9.831c-2.087,1.365-3.871,3.149-5.236,5.236L30.764,32l-9.831,9.831c1.365,2.087,3.149,3.871,5.236,5.236L36,37.236l9.831,9.831C47.918,45.702,49.702,43.918,51.067,41.831z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 482 B

4
webpack.common.js
View File

@ -484,10 +484,14 @@ module.exports = {
}]
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
exclude: path.resolve(__dirname, 'public/vendor/fretboard'),
use: [{
loader: 'url-loader',
options: { limit: '10000', mimetype: 'svg+xml' }
}]
}, {
test: /.*\/fretb.*\.svg$/,
loader: 'svg-inline-loader'
}, {
test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
use: [{