wired-elements
Version:
Collection of hand-drawn sketchy web components
161 lines (147 loc) • 10 kB
HTML
<html>
<head>
<link rel="preload" href="/node_modules/lit-element/lit-element.js" as="script" crossorigin>
<link rel="preload" href="/node_modules/lit-html/lit-html.js" as="script" crossorigin>
<link rel="preload" href="/packages/wired-icon/node_modules/wired-lib/lib/wired-lib.js" as="script" crossorigin>
<link rel="preload" href="/packages/wired-icon/lib/wired-icon.js" as="script" crossorigin>
<script type="module" src="../packages/wired-icon/lib/wired-icon.js"></script>
<script type="module" src="../packages/wired-mat-icon/lib/wired-mat-icon.js"></script>
<script type="module" src="../packages/wired-icon-button/lib/wired-icon-button.js"></script>
<style>
.icon {
width: 70px;
display: inline-block;
}
.icon-button{
display: block;
width: 30px;
}
</style>
</head>
<body>
<h2>Wired Icon</h2>
<p>With paths coming from the Vaadin iconset. viewbox='-1 -1 18 18' for best results</p>
<wired-icon class="icon"
config='{"fill": "lightblue", "hachureGap": "1.5", "fillWeight": "0.9", "roughness": "0.3"}'>
<svg viewbox='-1 -1 18 18'>
<path d="M15.9 5.7l-2-3.4-3.9 2.2v-4.5h-4v4.5l-4-2.2-2 3.4 3.9 2.3-3.9 2.3 2 3.4 4-2.2v4.5h4v-4.5l3.9 2.2 2-3.4-4-2.3z"></path>
</svg>
</wired-icon>
<wired-icon class="icon"
config='{"fill": "#3B5998", "fillStyle": "zigzag", "hachureAngle": "20", "hachureGap": "1.5", "fillWeight": "0.9", "roughness": "0.1"}'>
<svg viewbox='-1 -1 18 18'>
<path fill="#444" d="M7.2 16v-7.5h-2v-2.7h2c0 0 0-1.1 0-2.3 0-1.8 1.2-3.5 3.9-3.5 1.1 0 1.9 0.1 1.9 0.1l-0.1 2.5c0 0-0.8 0-1.7 0-1 0-1.1 0.4-1.1 1.2 0 0.6 0-1.3 0 2h2.9l-0.1 2.7h-2.8v7.5h-2.9z"></path>
</svg>
</wired-icon>
<wired-icon class="icon"
config='{"fill": "#3B5998", "fillStyle": "zigzag", "hachureAngle": "50", "hachureGap": "1.5", "fillWeight": "0.9", "roughness": "0.1"}'>
<svg viewbox='-1 -1 18 18'>
<path fill="#444" d="M0 0v16h16v-16h-16zM12.9 8.4h-2.1v5.6h-2.1v-5.6h-1.5v-2h1.5c0 0 0-0.8 0-1.7 0-1.5 0.9-2.7 2.9-2.7 0.8 0 1.4 0.1 1.4 0.1v1.9c0 0-0.6 0-1.3 0s-0.8 0.3-0.8 0.9c0 0.1 0 0.1 0 0.1 0 0.2 0 0.5 0 1.4h2.1l-0.1 2z"></path>
</svg>
</wired-icon>
<wired-icon class="icon"
config='{"fill": "lightblue", "hachureGap": "1.5", "fillWeight": "0.9", "roughness": "0.1"}'>
<svg viewbox='-1 -1 18 18'>
<path fill="#444" d="M14 13l-4 1h-6l-4-1v-1h14z"></path>
<path fill="#444" d="M14.7 3h-1.7v-1h-12v5c0 1.5 0.8 2.8 2 3.4v0.6h8v-0.6c0.9-0.5 1.6-1.4 1.9-2.4 0 0 0.1 0 0.1 0 2.3 0 2.9-2 3-3.5 0.1-0.8-0.5-1.5-1.3-1.5zM13 7v-3h1.7c0.1 0 0.2 0.1 0.2 0.1s0.1 0.1 0.1 0.3c-0.2 2.6-1.6 2.6-2 2.6z"></path>
</svg>
</wired-icon>
<wired-icon class="icon"
config='{"fill": "gray", "fillStyle": "cross-hatch", "hachureGap": "1.5", "fillWeight": "0.5", "roughness": "0.1"}'>
<svg viewBox="0 0 24 24">
<circle cx="4.5" cy="9.5" r="2.5"/>
<circle cx="9" cy="5.5" r="2.5"/>
<circle cx="15" cy="5.5" r="2.5"/>
<circle cx="19.5" cy="9.5" r="2.5"/>
<path d="M17.34 14.86c-.87-1.02-1.6-1.89-2.48-2.91-.46-.54-1.05-1.08-1.75-1.32-.11-.04-.22-.07-.33-.09-.25-.04-.52-.04-.78-.04s-.53 0-.79.05c-.11.02-.22.05-.33.09-.7.24-1.28.78-1.75 1.32-.87 1.02-1.6 1.89-2.48 2.91-1.31 1.31-2.92 2.76-2.62 4.79.29 1.02 1.02 2.03 2.33 2.32.73.15 3.06-.44 5.54-.44h.18c2.48 0 4.81.58 5.54.44 1.31-.29 2.04-1.31 2.33-2.32.31-2.04-1.3-3.49-2.61-4.8z"/>
</svg>
</wired-icon>
<wired-icon class="icon"
config='{"fill": "lightgreen", "hachureGap": "1.5", "fillWeight": "0.9", "strokeWidth": "0.8", "roughness": "0.1"}'>
<svg viewbox='-1 -1 18 18'>
<path fill="#444" d="M6.18 14c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
<path fill="#444" d="M14 14c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
<path fill="#444" d="M15.76 8.64l-3-4.53c-0.455-0.673-1.215-1.11-2.078-1.11-0.008 0-0.015 0-0.023 0l-2.659-0v-1c0-0.552-0.448-1-1-1s-1 0.448-1 1v1h-4.5c-0.828 0-1.5 0.672-1.5 1.5v8.5h1.37c0.474-1.135 1.546-1.931 2.812-2 1.278 0.072 2.345 0.868 2.81 1.978l2.188 0.021c0.474-1.135 1.546-1.931 2.812-2 1.303 0.003 2.405 0.827 2.822 1.979l1.187 0.021v-3.57c-0.001-0.294-0.090-0.568-0.243-0.795zM6.92 8.12c-0.266 1.117-1.255 1.935-2.435 1.935-1.381 0-2.5-1.119-2.5-2.5 0-1.18 0.818-2.17 1.918-2.432 0.195-0.049 0.399-0.075 0.609-0.075 1.37 0 2.48 1.11 2.48 2.48 0 0.21-0.026 0.414-0.075 0.609zM10 8v-3h0.85c0.003-0 0.006-0 0.009-0 0.777 0 1.461 0.394 1.866 0.992l1.325 2.008z"></path>
</svg>
</wired-icon>
<wired-icon class="icon"
config='{"fill": "lightblue", "hachureGap": "1.5", "fillWeight": "0.9", "strokeWidth": "0.8", "roughness": "0.1"}'>
<svg viewbox='-1 -1 18 18'>
<path d="M7.5 12.2c-2.3 0-4.2-1.9-4.2-4.2s1.9-4.2 4.2-4.2 4.2 1.9 4.2 4.2c0.1 2.3-1.9 4.2-4.2 4.2zM7.5 5.2c-1.5 0-2.7 1.3-2.7 2.8s1.2 2.8 2.8 2.8 2.8-1.2 2.8-2.8-1.4-2.8-2.9-2.8z"></path>
<path d="M8 16c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8c0 1.5-0.4 3-1.2 4.2-0.3 0.5-1.1 1.2-2.3 1.2-0.8 0-1.3-0.3-1.6-0.6-0.7-0.7-0.6-1.8-0.6-1.9v-6.9h1.5v7c0 0.2 0 0.6 0.2 0.8 0 0 0.2 0.2 0.5 0.2 0.7 0 1.1-0.5 1.1-0.5 0.6-1 1-2.2 1-3.4 0-3.6-2.9-6.5-6.5-6.5s-6.6 2.8-6.6 6.4 2.9 6.5 6.5 6.5c0.7 0 1.3-0.1 1.9-0.3l0.4 1.4c-0.7 0.3-1.5 0.4-2.3 0.4z"></path>
</svg>
</wired-icon>
<wired-icon class="icon"
config='{"fill": "lightblue", "hachureGap": "1.5", "fillWeight": "0.9", "strokeWidth": "0.8", "roughness": "0.1"}'>
<svg viewbox='0 0 24 24'>
<path d="M22 21c-1.11 0-1.73-.37-2.18-.64-.37-.22-.6-.36-1.15-.36-.56 0-.78.13-1.15.36-.46.27-1.07.64-2.18.64s-1.73-.37-2.18-.64c-.37-.22-.6-.36-1.15-.36-.56 0-.78.13-1.15.36-.46.27-1.08.64-2.19.64-1.11 0-1.73-.37-2.18-.64-.37-.23-.6-.36-1.15-.36s-.78.13-1.15.36c-.46.27-1.08.64-2.19.64v-2c.56 0 .78-.13 1.15-.36.46-.27 1.08-.64 2.19-.64s1.73.37 2.18.64c.37.23.59.36 1.15.36.56 0 .78-.13 1.15-.36.46-.27 1.08-.64 2.19-.64 1.11 0 1.73.37 2.18.64.37.22.6.36 1.15.36s.78-.13 1.15-.36c.45-.27 1.07-.64 2.18-.64s1.73.37 2.18.64c.37.23.59.36 1.15.36v2zm0-4.5c-1.11 0-1.73-.37-2.18-.64-.37-.22-.6-.36-1.15-.36-.56 0-.78.13-1.15.36-.45.27-1.07.64-2.18.64s-1.73-.37-2.18-.64c-.37-.22-.6-.36-1.15-.36-.56 0-.78.13-1.15.36-.45.27-1.07.64-2.18.64s-1.73-.37-2.18-.64c-.37-.22-.6-.36-1.15-.36s-.78.13-1.15.36c-.47.27-1.09.64-2.2.64v-2c.56 0 .78-.13 1.15-.36.45-.27 1.07-.64 2.18-.64s1.73.37 2.18.64c.37.22.6.36 1.15.36.56 0 .78-.13 1.15-.36.45-.27 1.07-.64 2.18-.64s1.73.37 2.18.64c.37.22.6.36 1.15.36s.78-.13 1.15-.36c.45-.27 1.07-.64 2.18-.64s1.73.37 2.18.64c.37.22.6.36 1.15.36v2zM8.67 12c.56 0 .78-.13 1.15-.36.46-.27 1.08-.64 2.19-.64 1.11 0 1.73.37 2.18.64.37.22.6.36 1.15.36s.78-.13 1.15-.36c.12-.07.26-.15.41-.23L10.48 5C8.93 3.45 7.5 2.99 5 3v2.5c1.82-.01 2.89.39 4 1.5l1 1-3.25 3.25c.31.12.56.27.77.39.37.23.59.36 1.15.36z"/>
<circle cx="16.5" cy="5.5" r="2.5"/>
</svg>
</wired-icon>
<wired-icon class="icon"
config='{"fill": "lightblue", "hachureGap": "1.5", "fillWeight": "0.9", "strokeWidth": "0.8", "roughness": "0.2"}'>
<svg viewbox='0 0 24 24'>
<rect x="3" y="8" width="18" height="13"></rect>
<rect x="1" y="3" width="22" height="5"></rect>
<line x1="10" y1="12" x2="14" y2="12"></line>
</svg>
</wired-icon>
<wired-icon class="icon"
config='{"fill": "lightblue", "hachureGap": "1.5", "fillWeight": "0.9", "strokeWidth": "0.8", "roughness": "0.2"}'>
<svg viewbox='0 0 24 24'>
<polygon points="21 8 21 21 3 21 3 8"></polygon>
</svg>
</wired-icon>
<wired-icon config='{"fill": "gray", "hachureGap": "1"}'>
<svg width="26" height="24" viewBox="0 0 26 24" id="ic_signal_wifi_statusbar_connected_no_internet_2_26x24px">
<path fill-opacity=".3" d="M24.24 8l1.35-1.68C25.1 5.96 20.26 2 13 2S.9 5.96.42 6.32l12.57 15.66.01.02.01-.01L20 13.28V8h4.24z"/>
<path d="M5.45 12.59l7.54 9.4.01.01.01-.01L20 13.28v-1.09c-1.07-.73-3.59-2.19-7-2.19-4.36 0-7.26 2.38-7.55 2.59zM22 10v8h2v-8h-2zm0 12h2v-2h-2v2z"/>
</svg>
</wired-icon>
<br>
<hr>
<h2>Wired Mat Icon</h2>
<wired-mat-icon class="icon" icon="audiotrack">
</wired-mat-icon>
<span>Default (roughness = 0.1)</span>
<br>
<wired-mat-icon class="icon" icon="settings" config='{"fill": "red", "hachureGap": "1"}'>
</wired-mat-icon>
<span>{"fill": "red", "hachureGap": "1"}</span>
<br>
<wired-mat-icon class="icon" icon="android"
config='{"fillStyle": "zigzag", "fill": "green", "hachureGap": "1.5", "fillWeight": "0.9"}'>
</wired-mat-icon>
<span>{"fillStyle": "zigzag", "fill": "green", "hachureGap": "1.5", "fillWeight": "0.9"}</span>
<br>
<wired-mat-icon class="icon" icon="computer"
config='{"stroke": "transparent", "fill": "black", "fillStyle": "solid"}'>
</wired-mat-icon>
<span>{"stroke": "transparent", "fill": "black", "fillStyle": "solid"}</span>
<br>
<wired-mat-icon class="icon" icon="account_box"
config='{"stroke": "transparent", "fill": "red", "fillStyle": "zigzag", "hachureGap": "1.5", "fillWeight": "0.9"}'>
</wired-mat-icon>
<span>{"stroke": "transparent", "fill": "red", "fillStyle": "zigzag", "hachureGap": "1.7", "fillWeight": "0.8"}</span>
<br>
<hr>
<h2>With Wired Icon button</h2>
<wired-icon-button elevation="5">
<wired-mat-icon icon="edit"
class="icon-button"
config='{"strokeWidth": "0.3", "fillWeight": "0.8", "hachureAngle": "20", "fill": "gray"}'
></wired-mat-icon>
</wired-icon-button>
<wired-icon-button elevation="5">
<wired-icon
class="icon-button"
config='{"strokeWidth": "0.3", "fill": "blue", "fillStyle": "cross-hatch"}'
>
<svg viewbox="-1 -1 18 18">
<path d="M9 11h-3c0-3 1.6-4 2.7-4.6 0.4-0.2 0.7-0.4 0.9-0.6 0.5-0.5 0.3-1.2 0.2-1.4-0.3-0.7-1-1.4-2.3-1.4-2.1 0-2.5 1.9-2.5 2.3l-3-0.4c0.2-1.7 1.7-4.9 5.5-4.9 2.3 0 4.3 1.3 5.1 3.2 0.7 1.7 0.4 3.5-0.8 4.7-0.5 0.5-1.1 0.8-1.6 1.1-0.9 0.5-1.2 1-1.2 2z"></path>
<path d="M9.5 14c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
</svg>
</wired-icon>
</wired-icon-button>
</body>
</html>