Add svg-inline-loader (#3146)

sites/fast-website/package.json

@@ -15,6 +15,7 @@
     "mini-css-extract-plugin": "^0.9.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "prettier": "2.0.2",
+    "svg-inline-loader": "^0.8.2",
     "terser-webpack-plugin": "^3.0.1",
     "ts-loader": "^7.0.2",
     "typescript": "^3.8.3",

sites/fast-website/src/app/components/color-swatch/color-swatch.styles.ts

@@ -5,7 +5,7 @@ import {
     neutralOutlineHoverBehavior,
     neutralOutlineRestBehavior,
 } from "@microsoft/fast-components";
-import { heightNumber } from "@microsoft/fast-components/dist/styles/size";
+import { heightNumber } from "@microsoft/fast-components/dist/esm/styles/size";
 import { SystemColors } from "@microsoft/fast-web-utilities";
 import {
     display,

sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts

@@ -107,12 +107,8 @@ export const FastFrameStyles = css`
         grid-column: 2;
     }
 
-    .icon-cut {
-        fill: var(--accent-foreground-cut-rest);
-    }
-
     .icon {
-        fill: var(--neutral-foreground-rest);
+        fill: currentColor;
     }
 
     .sample-control {

sites/fast-website/src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+    const content: any;
+    export default content;
+}

sites/fast-website/tsconfig.json

@@ -8,7 +8,10 @@
         "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,
         "experimentalDecorators": true,
-        "resolveJsonModule": true
+        "resolveJsonModule": true,
+        "paths": {
+            "svg": ["src/app/svg"]
+        }
     },
     "include": [
         "src/**/*"

sites/fast-website/webpack.common.js

@@ -14,7 +14,10 @@ module.exports = {
         main: path.resolve(appDir, "index.ts"),
     },
     resolve: {
-        extensions: [".ts", ".tsx", ".js"],
+        extensions: [".svg", ".ts", ".tsx", ".js"],
+        alias: {
+            svg: path.resolve(__dirname, "src/app/svg")
+        }
     },
     output: {
         path: path.resolve(__dirname, "dist"),
@@ -50,6 +53,17 @@ module.exports = {
                     },
                 ],
             },
+            {
+                test: /\.svg$/,
+                use: [
+                    {
+                        loader: "svg-inline-loader",
+                        options: {
+                            removeSVGTagAttrs: false
+                        }
+                    }
+                ]
+            }
         ],
     },
     plugins: [

yarn.lock

@@ -22277,6 +22277,11 @@ simple-get@^3.0.3, simple-get@^3.1.0:
     once "^1.3.1"
     simple-concat "^1.0.0"
 
+simple-html-tokenizer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz#05c2eec579ffffe145a030ac26cfea61b980fabe"
+  integrity sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4=
+
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
@@ -23227,6 +23232,15 @@ supports-hyperlinks@^2.0.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+svg-inline-loader@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/svg-inline-loader/-/svg-inline-loader-0.8.2.tgz#9872414f9e4141601e04eb80cda748c9a50dae71"
+  integrity sha512-kbrcEh5n5JkypaSC152eGfGcnT4lkR0eSfvefaUJkLqgGjRQJyKDvvEE/CCv5aTSdfXuc+N98w16iAojhShI3g==
+  dependencies:
+    loader-utils "^1.1.0"
+    object-assign "^4.0.1"
+    simple-html-tokenizer "^0.1.1"
+
 svg-parser@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.2.tgz#d134cc396fa2681dc64f518330784e98bd801ec8"