Add font svg support

custom.d.ts

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

package.json

@@ -20,6 +20,8 @@
     "prettier": "^2.8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sass": "^1.64.0",
+    "sass-loader": "^13.3.2",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.4.2",
     "typescript": "^4.9.5",

src/components/Svg/Svg.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import logo from '../../svg/demo.svg';
+
+export default function Svg(props: any) {
+  return (
+    <div style={{ display: 'grid' }}>
+      <img src={logo} alt="A Rectangle Image with SVG" />
+    </div>
+  );
+}

src/components/Text/Text.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function Text(props: any) {
+  return (
+    <div style={{display: 'grid'}}>
+    <p style={{fontSize: 50}}>
+    Here is some text to display.
+    </p>
+    </div>
+  );
+}

src/components/UXPinWrapper/UXPinWrapper.tsx

@@ -1,5 +1,6 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
+import '../../styles/styles.scss';
 
 export default function UXPinWrapper({ children }: { children: ReactNode }) {
-  return children;
+  return <div className="theme-provider">{children}</div>;
 }

src/styles/styles.scss

@@ -0,0 +1,10 @@
+@font-face {
+  font-family: 'Dancing Script';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Dancing Script'), url('../fonts/DancingScript.woff2') format('woff2');
+}
+
+.theme-provider {
+  font-family: Dancing Script;
+}

tsconfig.json

@@ -22,6 +22,7 @@
     ".uxpin-merge"
   ],
   "include": [
-    "src"
+    "src",
+    "custom.d.ts"
   ]
 }

uxpin.config.js

@@ -5,6 +5,8 @@ module.exports = {
         name: 'General',
         include: [
           'src/components/Button/Button.tsx',
+          'src/components/Svg/Svg.tsx',
+          'src/components/Text/Text.tsx'
         ],
       },
     ],

webpack.config.js

@@ -5,6 +5,7 @@ const config = {
     './src/index.tsx'
   ],
   output: {
+    publicPath: '',
     path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.js'
   },
@@ -26,6 +27,22 @@ const config = {
           'style-loader',
           'css-loader'
         ]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      },
+      {
+        test: /\.(png|jp(e*)g|gif|woff)$/,
+        type: 'asset/resource'
+      },
+      {
+        test: /\.svg$/,
+        type: 'asset/inline'
       }
     ]
   },
@@ -39,4 +56,4 @@ const config = {
   }
 };
 
-module.exports = config;
+module.exports = config;

yarn.lock

@@ -2512,7 +2512,7 @@ character-reference-invalid@^1.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
   integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
 
-chokidar@^3.5.1, chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.1, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -3776,6 +3776,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
+immutable@^4.0.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.1.tgz#17988b356097ab0719e2f741d56f3ec6c317f9dc"
+  integrity sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -5489,6 +5494,22 @@ safe-regex-test@^1.0.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass-loader@^13.3.2:
+  version "13.3.2"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.3.2.tgz#460022de27aec772480f03de17f5ba88fa7e18c6"
+  integrity sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==
+  dependencies:
+    neo-async "^2.6.2"
+
+sass@^1.64.0:
+  version "1.64.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.64.0.tgz#9ca8d0acb1a704b86b7f1197dc310f568fb34638"
+  integrity sha512-m7YtAGmQta9uANIUJwXesAJMSncqH+3INc8kdVXs6eV6GUC8Qu2IYKQSN8PRLgiQfpca697G94klm2leYMxSHw==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 scheduler@^0.23.0:
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
@@ -5661,7 +5682,7 @@ sortobject@^1.1.1:
   dependencies:
     editions "^2.2.0"
 
-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==