Skip to content

Commit 5330b2a

Browse files
RobBrazierRobBrazier
authored
feat: add support for svelte 2 (#205)
* 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
1 parent 51f9f53 commit 5330b2a

File tree

14 files changed

+5202
-12472
lines changed

14 files changed

+5202
-12472
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,5 +58,6 @@ typings/
5858
.env
5959

6060
**/dist/
61+
!example/dist/
6162

6263
.idea/

‎example/App.html

Lines changed: 14 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
<main>
2-
<figure id="logo" on:mouseenter="toggle()" on:mouseleave="toggle()" on:click="change()" title="{{logo}}">
2+
<figure id="logo" on:mouseenter="toggle()" on:mouseleave="toggle()" on:click="change()" title="{logo}">
33
<Icon bind:name="logo" scale="4"></Icon>
44
</figure>
55
<h1><a href="https://github.com/RobBrazier/svelte-awesome">Svelte-Awesome</a></h1>
66
<p class="desc">Font Awesome component for Svelte.js, using inline SVG.</p>
77

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

1212
<h2>Scale</h2>
1313
<p><Icon name="language" scale="3"></Icon></p>
14-
<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>
14+
<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>
1515

1616
<h2>Spin</h2>
1717
<p><Icon name="refresh" spin></Icon></p>
18-
<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>
18+
<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>
1919

2020
<h2>Pulse</h2>
2121
<p><Icon name="spinner" pulse></Icon></p>
22-
<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>
22+
<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>
2323

2424
<h2>Flip</h2>
2525
<p><Icon name="signal" flip="horizontal"></Icon></p>
26-
<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>
26+
<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>
2727

2828
<h2>Label</h2>
2929
<p><small>Accessible for screen readers, etc.</small></p>
3030
<p><Icon name="code" label="Source Code"></Icon></p>
31-
<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>
31+
<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>
3232

3333
<h2>Stacked icons</h2>
3434
<p><small>Use stacked icons like in FontAwesome. Even more powerful.</small></p>
@@ -38,15 +38,15 @@ <h2>Stacked icons</h2>
3838
<Icon name="ban" scale="2" class="alert"></Icon>
3939
</Icon>
4040
</p>
41-
<figure><pre><code>&amp;lt;Icon <span class="attr">label</span>=<span class="val">"No Photos"</span>&gt;
42-
&amp;lt;Icon <span class="attr">name</span>=<span class="val">"camera"</span>&gt;&amp;lt;/Icon&gt;
43-
&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;
44-
&amp;lt;/Icon&gt;</code></pre></figure>
41+
<figure><pre><code>&#x3C;Icon <span class="attr">label</span>=<span class="val">"No Photos"</span>&gt;
42+
&#x3C;Icon <span class="attr">name</span>=<span class="val">"camera"</span>&gt;&#x3C;/Icon&gt;
43+
&#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;
44+
&#x3C;/Icon&gt;</code></pre></figure>
4545

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

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

61-
<style>
62-
main {
63-
margin: 0;
64-
padding: 4em 0 0;
65-
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
66-
color: #666;
67-
text-align: center;
68-
}
69-
a {
70-
color: inherit;
71-
text-decoration: none;
72-
}
73-
p a {
74-
color: #42b983;
75-
font-weight: 600;
76-
}
77-
#logo {
78-
display: block;
79-
width: 120px;
80-
height: 120px;
81-
margin: 20px auto 40px;
82-
padding: 20px;
83-
position: relative;
84-
border-radius: 50%;
85-
background-color: #35495e;
86-
color: #41b883;
87-
cursor: pointer;
88-
user-select: none;
89-
transition: all .3s;
90-
}
91-
#logo:hover {
92-
margin: 10px auto 30px;
93-
padding: 30px;
94-
background-color: #41b883;
95-
color: #35495e;
96-
}
97-
#logo .fa-icon {
98-
position: absolute;
99-
top: 50%;
100-
left: 50%;
101-
transform: translate(-50%, -50%);
102-
}
103-
h1 {
104-
margin-bottom: 1em;
105-
font-family: Dosis, "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
106-
}
107-
h1, h2 {
108-
color: #2c3e50;
109-
font-weight: 300;
110-
}
111-
h2 {
112-
margin-top: 3em;
113-
font-size: 1.2em;
114-
}
115-
.desc {
116-
margin-bottom: 4em;
117-
color: #7f8c8d;
118-
}
119-
figure .fa-icon {
120-
display: block;
121-
}
122-
p small {
123-
font-size: 0.8em;
124-
color: #7f8c8d;
125-
}
126-
pre {
127-
display: inline-block;
128-
margin: 0;
129-
padding: 0.8em;
130-
background-color: #f9f9f9;
131-
box-shadow: 0 1px 2px rgba(0,0,0,0.125);
132-
text-align: left;
133-
line-height: 1.1;
134-
color: #2973b7;
135-
}
136-
pre, code {
137-
font-family: "Roboto Mono", Monaco, courier, monospace;
138-
}
139-
pre code {
140-
font-size: 0.8em;
141-
}
142-
.attr {
143-
color: #e96900;
144-
}
145-
.val {
146-
color: #42b983;
147-
}
148-
footer {
149-
margin: 5em 0 3em;
150-
font-size: 0.5em;
151-
vertical-align: middle;
152-
}
153-
footer a {
154-
display: inline-block;
155-
margin: 0 5px;
156-
padding: 3px 0 6px;
157-
color: #7f8c8d;
158-
font-size: 2em;
159-
text-decoration: none;
160-
}
161-
footer a:hover {
162-
padding-bottom: 3px;
163-
border-bottom: 3px solid #42b983;
164-
}
165-
.alert {
166-
color: #c33;
167-
opacity: .8;
168-
}
169-
@media (max-width: 640px) {
170-
body {
171-
padding-top: 0;
172-
text-align: left;
173-
}
174-
#logo {
175-
margin: 0 auto;
176-
transform: scale(.6);
177-
}
178-
#logo:hover {
179-
margin: -10px auto;
180-
}
181-
h1,
182-
p {
183-
padding: 0 25px;
184-
}
185-
h1 {
186-
border-left: 5px solid #2c3e50;
187-
}
188-
h2 {
189-
padding-left: 20px;
190-
border-left: 5px solid rgba(0, 0, 0, 0.1);
191-
}
192-
figure {
193-
margin: 1em 0;
194-
}
195-
pre {
196-
display: block;
197-
box-shadow: none;
198-
overflow-x: auto;
199-
font-size: 0.9em;
200-
}
201-
}
202-
</style>
203-
20461
<script>
20562
import Icon from '../src/components/Icon.html';
20663
import '../src/icons';
@@ -229,13 +86,13 @@ <h2>Multi-color icons</h2>
22986
},
23087
toggle() {
23188
this.set({
232-
running: !this.get('running'),
89+
running: !this.get().running,
23390
});
23491
},
23592
},
23693
oncreate() {
23794
setInterval(() => {
238-
if (this.get('running')) {
95+
if (this.get().running) {
23996
this.change();
24097
}
24198
}, 200);

‎example/dist/global.css

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
main {
2+
margin: 0;
3+
padding: 4em 0 0;
4+
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
5+
color: #666;
6+
text-align: center;
7+
}
8+
a {
9+
color: inherit;
10+
text-decoration: none;
11+
}
12+
p a {
13+
color: #42b983;
14+
font-weight: 600;
15+
}
16+
#logo {
17+
display: block;
18+
width: 120px;
19+
height: 120px;
20+
margin: 20px auto 40px;
21+
padding: 20px;
22+
position: relative;
23+
border-radius: 50%;
24+
background-color: #35495e;
25+
color: #41b883;
26+
cursor: pointer;
27+
user-select: none;
28+
transition: all .3s;
29+
}
30+
#logo:hover {
31+
margin: 10px auto 30px;
32+
padding: 30px;
33+
background-color: #41b883;
34+
color: #35495e;
35+
}
36+
#logo .fa-icon {
37+
position: absolute;
38+
top: 50%;
39+
left: 50%;
40+
transform: translate(-50%, -50%);
41+
}
42+
h1 {
43+
margin-bottom: 1em;
44+
font-family: Dosis, "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
45+
}
46+
h1, h2 {
47+
color: #2c3e50;
48+
font-weight: 300;
49+
}
50+
h2 {
51+
margin-top: 3em;
52+
font-size: 1.2em;
53+
}
54+
.desc {
55+
margin-bottom: 4em;
56+
color: #7f8c8d;
57+
}
58+
figure .fa-icon {
59+
display: block;
60+
}
61+
p small {
62+
font-size: 0.8em;
63+
color: #7f8c8d;
64+
}
65+
pre {
66+
display: inline-block;
67+
margin: 0;
68+
padding: 0.8em;
69+
background-color: #f9f9f9;
70+
box-shadow: 0 1px 2px rgba(0,0,0,0.125);
71+
text-align: left;
72+
line-height: 1.1;
73+
color: #2973b7;
74+
}
75+
pre, code {
76+
font-family: "Roboto Mono", Monaco, courier, monospace;
77+
}
78+
pre code {
79+
font-size: 0.8em;
80+
}
81+
.attr {
82+
color: #e96900;
83+
}
84+
.val {
85+
color: #42b983;
86+
}
87+
footer {
88+
margin: 5em 0 3em;
89+
font-size: 0.5em;
90+
vertical-align: middle;
91+
}
92+
footer a {
93+
display: inline-block;
94+
margin: 0 5px;
95+
padding: 3px 0 6px;
96+
color: #7f8c8d;
97+
font-size: 2em;
98+
text-decoration: none;
99+
}
100+
footer a:hover {
101+
padding-bottom: 3px;
102+
border-bottom: 3px solid #42b983;
103+
}
104+
.alert {
105+
color: #c33;
106+
opacity: .8;
107+
}
108+
@media (max-width: 640px) {
109+
body {
110+
padding-top: 0;
111+
text-align: left;
112+
}
113+
#logo {
114+
margin: 0 auto;
115+
transform: scale(.6);
116+
}
117+
#logo:hover {
118+
margin: -10px auto;
119+
}
120+
h1,
121+
p {
122+
padding: 0 25px;
123+
}
124+
h1 {
125+
border-left: 5px solid #2c3e50;
126+
}
127+
h2 {
128+
padding-left: 20px;
129+
border-left: 5px solid rgba(0, 0, 0, 0.1);
130+
}
131+
figure {
132+
margin: 1em 0;
133+
}
134+
pre {
135+
display: block;
136+
box-shadow: none;
137+
overflow-x: auto;
138+
font-size: 0.9em;
139+
}
140+
}

‎example/dist/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset='utf8'>
5+
<meta name='viewport' content='width=device-width'>
6+
7+
<title>svelte-awesome</title>
8+
9+
<link rel='stylesheet' href='global.css'>
10+
<link rel='stylesheet' href='bundle.css'>
11+
</head>
12+
13+
<body>
14+
<script src='bundle.js'></script>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)