Use svg as vue components (#8)

* Install the svg-to-vue-component package
* Configure webpack for vue-svg-loader
* Use menu icon as SVG component
* Change footer png icons to SVG
* Update features icons to SVG
* Move icons to icon directory
* Add discord logo in SVG format
* Use "vue-svg-loader" instead of "svg-to-vue-component"

Author: mittalyashu

gridsome.config.js

@@ -3,6 +3,14 @@ module.exports = {
 	siteUrl: 'https://thermal.codecarrot.net/',
 	titleTemplate: "%s | Thermal",
 
+	chainWebpack: config => {
+		const svgRule = config.module.rule('svg')
+		svgRule.uses.clear()
+		svgRule
+			.use('vue-svg-loader')
+			.loader('vue-svg-loader')
+	},
+
 	plugins: [
 		{
 			use: '@gridsome/plugin-google-analytics',

package.json

@@ -30,6 +30,7 @@
     "@gridsome/transformer-remark": "^0.3.1",
     "node-sass": "^4.12.0",
     "platform": "^1.3.5",
-    "sass-loader": "^7.1.0"
+    "sass-loader": "^7.1.0",
+    "vue-svg-loader": "^0.12.0"
   }
 }

src/components/Footer.vue

@@ -33,16 +33,16 @@
 
 			<div class="footer__social">
 				<a href="https://www.github.com/gitthermal/thermal" class="footer__social-item">
-					<g-image src="../../static/images/github-4x.png" />
+					<g-image src="../../static/images/icon/github.svg" />
 				</a>
 				<a href="https://discord.gg/KT3nAR5" class="footer__social-item">
-					<g-image src="../../static/images/discord-4x.png" />
+					<g-image src="../../static/images/icon/discord.svg" />
 				</a>
 				<a href="https://www.producthunt.com/posts/thermal" class="footer__social-item">
-					<g-image src="../../static/images/producthunt-4x.png" />
+					<g-image src="../../static/images/icon/producthunt.svg" />
 				</a>
 				<a href="https://www.twitter.com/gitthermal" class="footer__social-item">
-					<g-image src="../../static/images/twitter-4x.png" />
+					<g-image src="../../static/images/icon/twitter.svg" />
 				</a>
 			</div>
 

src/components/Header.vue

@@ -50,7 +50,7 @@
 					@click="navbarToggle()"
 					class="header__navbar-menu"
 				>
-					<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
+					<MenuIcon />
 				</div>
 			</div>
 		</Container>
@@ -60,6 +60,7 @@
 <script>
 import Container from "../layouts/Container";
 import Logo from "./Logo";
+import MenuIcon from "../../static/images/icon/menu.svg"
 import OutlineButton from "./Button/OutlineButton"
 import DownloadMixin from "../mixins/download"
 
@@ -75,6 +76,7 @@ export default {
   components: {
     Container,
 		Logo,
+		MenuIcon,
 		OutlineButton
 	},
 	props: {

src/pages/Download.vue

@@ -19,21 +19,21 @@
 						<div class="download__other-list">
 							<div class="download__other-item">
 								<g-image
-									src="../../static/images/windows.svg"
+									src="../../static/images/icon/windows.svg"
 									class="download__other-image"
 								/>
 								<h4>Windows</h4>
 							</div>
 							<div class="download__other-item">
 								<g-image
-									src="../../static/images/mac.png"
+									src="../../static/images/icon/mac.png"
 									class="download__other-image"
 								/>
 								<h4>MacOS</h4>
 							</div>
 							<div class="download__other-item">
 								<g-image
-									src="../../static/images/linux.svg"
+									src="../../static/images/icon/linux.svg"
 									class="download__other-image"
 								/>
 								<h4>Linux</h4>

src/pages/Index.vue

@@ -61,7 +61,7 @@
 			<container>
 				<div class="index__features-container">
 					<div class="index__features-item">
-						<g-image src="../../static/images/open-source-2x.png" class="index__features-icon" />
+						<g-image src="../../static/images/icon/open-source.svg" class="index__features-icon" />
 						<div class="index__features-heading">
 							Open Source
 						</div>
@@ -70,7 +70,7 @@
 						</div>
 					</div>
 					<div class="index__features-item">
-						<g-image src="../../static/images/easy-to-use-2x.png" class="index__features-icon" />
+						<g-image src="../../static/images/icon/easy-to-use.svg" class="index__features-icon" />
 						<div class="index__features-heading">
 							Easy to use
 						</div>
@@ -79,7 +79,7 @@
 						</div>
 					</div>
 					<div class="index__features-item">
-						<g-image src="../../static/images/multi-os-2x.png" class="index__features-icon" />
+						<g-image src="../../static/images/icon/multi-os.svg" class="index__features-icon" />
 						<div class="index__features-heading">
 							Cross platform
 						</div>

static/images/icon/discord.svg

@@ -8006,7 +8006,14 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
-svgo@^1.0.0:
+svg-to-vue@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/svg-to-vue/-/svg-to-vue-0.4.0.tgz#93a2fc9658c09593f6099ac7f5ded73ac83dc549"
+  integrity sha512-g/ZHtEFf4QDsDtTk9tuYX/MJ2HESTUBMTkuLoffQGQ3xMtlmD9Ec4YyTgmMkP1P8QJtWWu2FiGdOnlKaXc/X/Q==
+  dependencies:
+    svgo "^1.1.1"
+
+svgo@^1.0.0, svgo@^1.1.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.2.2.tgz#0253d34eccf2aed4ad4f283e11ee75198f9d7316"
   integrity sha512-rAfulcwp2D9jjdGu+0CuqlrAUin6bBWrpoqXWwKDZZZJfXcUXQSxLJOFJCQCSA0x0pP2U0TxSlJu2ROq5Bq6qA==
@@ -8743,6 +8750,14 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-svg-loader@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/vue-svg-loader/-/vue-svg-loader-0.12.0.tgz#5ea97d021edd3023236b92f96c3aba433b5d428b"
+  integrity sha512-pg8H6iKCj+DAC7FZuxdfGJMHiFpJPv/YyoN1M7Iqlf+Hu4eU6Q/W/sEFx978syQA+aOx0NXrp+uQUAajqQvXbQ==
+  dependencies:
+    loader-utils "^1.2.3"
+    svg-to-vue "^0.4.0"
+
 vue-template-compiler@^2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz#323b4f3495f04faa3503337a82f5d6507799c9cc"