Skip to content

Commit

Permalink
feat: add support for svelte 2 (#205)
Browse files Browse the repository at this point in the history
* feat: add support for svelte 2

* style(eslint): fix eslint errors

* style(eslint): fix eslint errors

* fix: add svelte 2 support

* build: regenerate package-lock.json

* build: regenerate package-lock.json

* style: fix eslint errors
  • Loading branch information
RobBrazier authored Jun 24, 2018
1 parent 51f9f53 commit 5330b2a
Show file tree
Hide file tree
Showing 14 changed files with 5,202 additions and 12,472 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -58,5 +58,6 @@ typings/
.env

**/dist/
!example/dist/

.idea/
171 changes: 14 additions & 157 deletions example/App.html
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
<main>
<figure id="logo" on:mouseenter="toggle()" on:mouseleave="toggle()" on:click="change()" title="{{logo}}">
<figure id="logo" on:mouseenter="toggle()" on:mouseleave="toggle()" on:click="change()" title="{logo}">
<Icon bind:name="logo" scale="4"></Icon>
</figure>
<h1><a href="https://github.com/RobBrazier/svelte-awesome">Svelte-Awesome</a></h1>
<p class="desc">Font Awesome component for Svelte.js, using inline SVG.</p>

<h2>Basic</h2>
<p><Icon name="flag"></Icon></p>
<figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"flag"</span>&gt;&amp;lt;/Icon&gt;</code></pre></figure>
<figure><pre><code>&#x3C;Icon <span class="attr">name</span>=<span class="val">"flag"</span>&gt;&#x3C;/Icon&gt;</code></pre></figure>

<h2>Scale</h2>
<p><Icon name="language" scale="3"></Icon></p>
<figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"language"</span> <span class="attr">scale</span>=<span class="val">"3"</span>&gt;&amp;lt;/Icon&gt;</code></pre></figure>
<figure><pre><code>&#x3C;Icon <span class="attr">name</span>=<span class="val">"language"</span> <span class="attr">scale</span>=<span class="val">"3"</span>&gt;&#x3C;/Icon&gt;</code></pre></figure>

<h2>Spin</h2>
<p><Icon name="refresh" spin></Icon></p>
<figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"refresh"</span> <span class="attr">spin</span>&gt;&amp;lt;/Icon&gt;</code></pre></figure>
<figure><pre><code>&#x3C;Icon <span class="attr">name</span>=<span class="val">"refresh"</span> <span class="attr">spin</span>&gt;&#x3C;/Icon&gt;</code></pre></figure>

<h2>Pulse</h2>
<p><Icon name="spinner" pulse></Icon></p>
<figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"spinner"</span> <span class="attr">pulse</span>&gt;&amp;lt;/Icon&gt;</code></pre></figure>
<figure><pre><code>&#x3C;Icon <span class="attr">name</span>=<span class="val">"spinner"</span> <span class="attr">pulse</span>&gt;&#x3C;/Icon&gt;</code></pre></figure>

<h2>Flip</h2>
<p><Icon name="signal" flip="horizontal"></Icon></p>
<figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"signal"</span> <span class="attr">flip</span>=<span class="val">"horizontal"</span>&gt;&amp;lt;/Icon&gt;</code></pre></figure>
<figure><pre><code>&#x3C;Icon <span class="attr">name</span>=<span class="val">"signal"</span> <span class="attr">flip</span>=<span class="val">"horizontal"</span>&gt;&#x3C;/Icon&gt;</code></pre></figure>

<h2>Label</h2>
<p><small>Accessible for screen readers, etc.</small></p>
<p><Icon name="code" label="Source Code"></Icon></p>
<figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"code"</span> <span class="attr">label</span>=<span class="val">"Source Code"</span>&gt;&amp;lt;/Icon&gt;</code></pre></figure>
<figure><pre><code>&#x3C;Icon <span class="attr">name</span>=<span class="val">"code"</span> <span class="attr">label</span>=<span class="val">"Source Code"</span>&gt;&#x3C;/Icon&gt;</code></pre></figure>

<h2>Stacked icons</h2>
<p><small>Use stacked icons like in FontAwesome. Even more powerful.</small></p>
Expand All @@ -38,15 +38,15 @@ <h2>Stacked icons</h2>
<Icon name="ban" scale="2" class="alert"></Icon>
</Icon>
</p>
<figure><pre><code>&amp;lt;Icon <span class="attr">label</span>=<span class="val">"No Photos"</span>&gt;
&amp;lt;Icon <span class="attr">name</span>=<span class="val">"camera"</span>&gt;&amp;lt;/Icon&gt;
&amp;lt;Icon <span class="attr">name</span>=<span class="val">"ban"</span> <span class="attr">scale</span>=<span class="val">"2"</span> <span class="attr">class</span>=<span class="val">"alert"</span>&gt;&amp;lt;/Icon&gt;
&amp;lt;/Icon&gt;</code></pre></figure>
<figure><pre><code>&#x3C;Icon <span class="attr">label</span>=<span class="val">"No Photos"</span>&gt;
&#x3C;Icon <span class="attr">name</span>=<span class="val">"camera"</span>&gt;&#x3C;/Icon&gt;
&#x3C;Icon <span class="attr">name</span>=<span class="val">"ban"</span> <span class="attr">scale</span>=<span class="val">"2"</span> <span class="attr">class</span>=<span class="val">"alert"</span>&gt;&#x3C;/Icon&gt;
&#x3C;/Icon&gt;</code></pre></figure>

<h2>Custom icons</h2>
<p><small>You can register your own icons.</small></p>
<p><Icon name="baidu"></Icon></p>
<figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"baidu"</span>&gt;&amp;lt;/Icon&gt;</code></pre></figure>
<figure><pre><code>&#x3C;Icon <span class="attr">name</span>=<span class="val">"baidu"</span>&gt;&#x3C;/Icon&gt;</code></pre></figure>

<h2>Multi-color icons</h2>
<p><small>Register icons in more advanced ways to unleash the full power of SVG.</small></p>
Expand All @@ -58,149 +58,6 @@ <h2>Multi-color icons</h2>
</footer>
</main>

<style>
main {
margin: 0;
padding: 4em 0 0;
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
color: #666;
text-align: center;
}
a {
color: inherit;
text-decoration: none;
}
p a {
color: #42b983;
font-weight: 600;
}
#logo {
display: block;
width: 120px;
height: 120px;
margin: 20px auto 40px;
padding: 20px;
position: relative;
border-radius: 50%;
background-color: #35495e;
color: #41b883;
cursor: pointer;
user-select: none;
transition: all .3s;
}
#logo:hover {
margin: 10px auto 30px;
padding: 30px;
background-color: #41b883;
color: #35495e;
}
#logo .fa-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
margin-bottom: 1em;
font-family: Dosis, "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}
h1, h2 {
color: #2c3e50;
font-weight: 300;
}
h2 {
margin-top: 3em;
font-size: 1.2em;
}
.desc {
margin-bottom: 4em;
color: #7f8c8d;
}
figure .fa-icon {
display: block;
}
p small {
font-size: 0.8em;
color: #7f8c8d;
}
pre {
display: inline-block;
margin: 0;
padding: 0.8em;
background-color: #f9f9f9;
box-shadow: 0 1px 2px rgba(0,0,0,0.125);
text-align: left;
line-height: 1.1;
color: #2973b7;
}
pre, code {
font-family: "Roboto Mono", Monaco, courier, monospace;
}
pre code {
font-size: 0.8em;
}
.attr {
color: #e96900;
}
.val {
color: #42b983;
}
footer {
margin: 5em 0 3em;
font-size: 0.5em;
vertical-align: middle;
}
footer a {
display: inline-block;
margin: 0 5px;
padding: 3px 0 6px;
color: #7f8c8d;
font-size: 2em;
text-decoration: none;
}
footer a:hover {
padding-bottom: 3px;
border-bottom: 3px solid #42b983;
}
.alert {
color: #c33;
opacity: .8;
}
@media (max-width: 640px) {
body {
padding-top: 0;
text-align: left;
}
#logo {
margin: 0 auto;
transform: scale(.6);
}
#logo:hover {
margin: -10px auto;
}
h1,
p {
padding: 0 25px;
}
h1 {
border-left: 5px solid #2c3e50;
}
h2 {
padding-left: 20px;
border-left: 5px solid rgba(0, 0, 0, 0.1);
}
figure {
margin: 1em 0;
}
pre {
display: block;
box-shadow: none;
overflow-x: auto;
font-size: 0.9em;
}
}
</style>

<script>
import Icon from '../src/components/Icon.html';
import '../src/icons';
Expand Down Expand Up @@ -229,13 +86,13 @@ <h2>Multi-color icons</h2>
},
toggle() {
this.set({
running: !this.get('running'),
running: !this.get().running,
});
},
},
oncreate() {
setInterval(() => {
if (this.get('running')) {
if (this.get().running) {
this.change();
}
}, 200);
Expand Down
140 changes: 140 additions & 0 deletions example/dist/global.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
main {
margin: 0;
padding: 4em 0 0;
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
color: #666;
text-align: center;
}
a {
color: inherit;
text-decoration: none;
}
p a {
color: #42b983;
font-weight: 600;
}
#logo {
display: block;
width: 120px;
height: 120px;
margin: 20px auto 40px;
padding: 20px;
position: relative;
border-radius: 50%;
background-color: #35495e;
color: #41b883;
cursor: pointer;
user-select: none;
transition: all .3s;
}
#logo:hover {
margin: 10px auto 30px;
padding: 30px;
background-color: #41b883;
color: #35495e;
}
#logo .fa-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
margin-bottom: 1em;
font-family: Dosis, "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}
h1, h2 {
color: #2c3e50;
font-weight: 300;
}
h2 {
margin-top: 3em;
font-size: 1.2em;
}
.desc {
margin-bottom: 4em;
color: #7f8c8d;
}
figure .fa-icon {
display: block;
}
p small {
font-size: 0.8em;
color: #7f8c8d;
}
pre {
display: inline-block;
margin: 0;
padding: 0.8em;
background-color: #f9f9f9;
box-shadow: 0 1px 2px rgba(0,0,0,0.125);
text-align: left;
line-height: 1.1;
color: #2973b7;
}
pre, code {
font-family: "Roboto Mono", Monaco, courier, monospace;
}
pre code {
font-size: 0.8em;
}
.attr {
color: #e96900;
}
.val {
color: #42b983;
}
footer {
margin: 5em 0 3em;
font-size: 0.5em;
vertical-align: middle;
}
footer a {
display: inline-block;
margin: 0 5px;
padding: 3px 0 6px;
color: #7f8c8d;
font-size: 2em;
text-decoration: none;
}
footer a:hover {
padding-bottom: 3px;
border-bottom: 3px solid #42b983;
}
.alert {
color: #c33;
opacity: .8;
}
@media (max-width: 640px) {
body {
padding-top: 0;
text-align: left;
}
#logo {
margin: 0 auto;
transform: scale(.6);
}
#logo:hover {
margin: -10px auto;
}
h1,
p {
padding: 0 25px;
}
h1 {
border-left: 5px solid #2c3e50;
}
h2 {
padding-left: 20px;
border-left: 5px solid rgba(0, 0, 0, 0.1);
}
figure {
margin: 1em 0;
}
pre {
display: block;
box-shadow: none;
overflow-x: auto;
font-size: 0.9em;
}
}
16 changes: 16 additions & 0 deletions example/dist/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!doctype html>
<html>
<head>
<meta charset='utf8'>
<meta name='viewport' content='width=device-width'>

<title>svelte-awesome</title>

<link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='bundle.css'>
</head>

<body>
<script src='bundle.js'></script>
</body>
</html>
Loading

0 comments on commit 5330b2a

Please sign in to comment.