fix: replace fontawesome with svg

Author: frankpagan

demo/index.html

@@ -101,7 +101,7 @@
             <a href="#spreadtheword">Spread the word</a>
           </div>
           <div class="margin-left:25px">
-            <a class="border:1px_black_solid border-radius:50px padding:10px" href="">Get Started <i class="fas fa-chevron-right"></i></a>
+            <a class="border:1px_black_solid border-radius:50px padding:10px" href="">Get Started <i class="height:16px fill:#505050" src="/assets/svg/chevron-right.svg"></i></a>
           </div>
         </div>
       </div>
@@ -187,11 +187,11 @@ <h1 class="text-align:center padding-bottom:20px">SPREAD THE WORD!</h1>
 
     					<div class="width:100% display:inline-block text-align:center padding-bottom:20px font-size:21px border-bottom:1px_solid_white">
     						<ul class="padding-0px list-style-type:none justify-content:center display:flex">
-    							<li class="padding:0px_15px"><a href="#" class="share color:white" social-network='facebook' title="Share on Facebook"><i class="fab fa-facebook-f footer-icon"></i></a></li>
-    							<li class="padding:0px_15px"><a href="#" class="share color:white" social-network='twitter'><i class="fab fa-twitter footer-icon"></i></a></li>
-    							<li class="padding:0px_15px"><a href="#" class="share color:white" social-network='google'><i class="fab fa-google-plus-g footer-icon"></i></a></li>
-    							<li class="padding:0px_15px"><a href="#" class="share color:white" social-network='linkedin' ><i class="fab fa-linkedin-in footer-icon"></i></a></li>
-    							<li class="padding:0px_15px"><a href="#" class="share color:white" social-network='pintrest' ><i class="fab fa-pinterest-p footer-icon"></i></a></li>
+    							<li class="padding:0px_15px"><a href="#" class="share color:white" social-network='facebook' title="Share on Facebook"><i class="footer-icon height:20px fill:#505050" src="/assets/svg/facebook-f.svg"></i></a></li>
+    							<li class="padding:0px_15px"><a href="#" class="share color:white" social-network='twitter'><i class="footer-icon height:20px fill:#505050" src="/assets/svg/twitter.svg"></i></a></li>
+    							<li class="padding:0px_15px"><a href="#" class="share color:white" social-network='google'><i class="footer-icon height:20px fill:#505050" src="/assets/svg/google-plus-g.svg"></i></a></li>
+    							<li class="padding:0px_15px"><a href="#" class="share color:white" social-network='linkedin' ><i class="footer-icon height:20px fill:#505050" src="/assets/svg/linkedin-in.svg"></i></a></li>
+    							<li class="padding:0px_15px"><a href="#" class="share color:white" social-network='pintrest' ><i class="footer-icon height:20px fill:#505050" src="/assets/svg/pinterest-p.svg"></i></a></li>
     						</ul>
     					</div>				
 

docs/index.html

@@ -35,13 +35,13 @@ <h2>overflow:auto</h2>
                 <div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="Enter decription here" share-title="testing im a title" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/scroll.png"
                     hover="display:block!important" hover-target=".social-networks">
                     <div class="display:none social-networks">
-                        <a class="margin-right:15px" share-network='twitter' title="Share on twitter"><i class="fab fa-twitter"></i></a>
-                        <a class="margin-right:15px" share-network='facebook' title="Share on Facebook"><i class="fab fa-facebook"></i></a>
-                        <a class="margin-right:15px" share-network='instagram' title="Share on instagram"><i class="fab fa-instagram"></i></a>
+                        <a class="margin-right:15px" share-network='twitter' title="Share on twitter"><i class="height:20px fill:#505050" src="/assets/svg/twitter.svg"></i></a>
+                        <a class="margin-right:15px" share-network='facebook' title="Share on Facebook"><i class="height:20px fill:#505050" src="/assets/svg/facebook.svg"></i></a>
+                        <a class="margin-right:15px" share-network='instagram' title="Share on instagram"><i class="height:20px fill:#505050" src="/assets/svg/instagram.svg"></i></a>
                     </div>
-                    <a class="margin-right:15px" share-network='share' title="Share on share"><i class="fas fa-share-alt"></i></a>
+                    <a class="margin-right:15px" share-network='share' title="Share on share"><i class="height:20px fill:#505050" src="/assets/svg/share-alt.svg"></i></a>
                 </div>
-                <a href="https://github.com/CoCreate-app/overflow:auto" target="_blank" class="margin-right:15px"><i class="fab fa-github"></i></a>
+                <a href="https://github.com/CoCreate-app/overflow:auto" target="_blank" class="margin-right:15px"><i class="height:20px fill:#505050" src="/assets/svg/github.svg"></i></a>
             </div>
         </div>
         <h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">A headless vinilla javascript micro component. Easy configuration using HTML5 attributes or Javscript api.</h1>
@@ -50,7 +50,7 @@ <h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-
                 <div id="scroll-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#scroll-install-section">
                     <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#scroll-install"]'>
                             <h2 class="padding:5px_0px">Install</h2>
-                            <a class="margin-left:10px display:none" href="#scroll-install"><i class="fas fa-link"></i></a>
+                            <a class="margin-left:10px display:none" href="#scroll-install"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
                         </span>
                 </div>
                 <pre><code class="language-bash">npm i @cocreate/scroll</code></pre>
@@ -60,7 +60,7 @@ <h2 class="padding:5px_0px">Install</h2>
                 <div id="scroll-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#scroll-usage-section">
                     <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#scroll-usage"]'>
                             <h2 class="padding:5px_0px">Usage</h2>
-                            <a class="margin-left:10px display:none" href="#scroll-usage"><i class="fas fa-link"></i></a>
+                            <a class="margin-left:10px display:none" href="#scroll-usage"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
                         </span>
                 </div>
                 <div class="">
@@ -78,7 +78,7 @@ <h2 class="padding:5px_0px">Usage</h2>
                 <div id="scroll-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#scroll-attributes-section">
                     <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#scroll-attributes"]'>
                             <h2 class="padding:5px_0px">Attributes</h2>
-                            <a class="margin-left:10px display:none" href="#scroll-attributes"><i class="fas fa-link"></i></a>
+                            <a class="margin-left:10px display:none" href="#scroll-attributes"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
                         </span>
                 </div>
                 <ul class="list-style-type:none ">
@@ -118,7 +118,7 @@ <h4><span>scroll-intersect</span> <span class="cocreate-badge success">string</s
                 <div id="scroll-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#scroll-demo-section">
                     <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#scroll-demo"]'>
                             <h2 class="padding:5px_0px">Demo</h2>
-                            <a class="margin-left:10px display:none" href="#scroll-demo"><i class="fas fa-link"></i></a>
+                            <a class="margin-left:10px display:none" href="#scroll-demo"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
                         </span>
                 </div>
                 <div class="position:sticky top:0 padding:15px_0px height:100vh">
@@ -135,10 +135,10 @@ <h2 class="padding:5px_0px">Demo</h2>
                             </div>
 
                             <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
-                                <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-target="#demo-code"><i class="far fa-eye"></i></a>
-                                <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-target="#demo-code"><i class="fas fa-eye-slash"></i></a>
-                                <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="fa fa-code"></i></a>
-                                <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="fas fa-code"></i></a>
+                                <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-target="#demo-code"><i class="height:18px fill:#505050" src="/assets/svg/eye.svg"></i></a>
+                                <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-target="#demo-code"><i class="height:20px fill:#505050" src="/assets/svg/eye-slash.svg"></i></a>
+                                <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="height:20px fill:#505050" src="/assets/svg/code.svg"></i></a>
+                                <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="display:flex height:18px fill:#505050" src="/assets/svg/code.svg"></i></a>
                                 <a class="margin-right:5px" fullscreen fullscreen-target="#playground"></a>
                             </div>
 
@@ -149,7 +149,7 @@ <h2 class="padding:5px_0px">Demo</h2>
 
         </div>
         <button href="https://github.com/CoCreate-app/overflow:auto/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
-				<i class="fas fa-pencil-alt"></i>
+				<i class="height:20px fill:#505050" src="/assets/svg/pencil-alt.svg"></i>
 			</button>
 		</main>