Change svg inlining
This commit is contained in:
schmelczerandras
parent
e8177c9c0a
commit
df959ad304
11 changed files with 112 additions and 46 deletions
3
custom.d.ts
vendored
3
custom.d.ts
vendored
|
|
@ -1,6 +1,5 @@
|
|||
declare module '*.svg' {
|
||||
import { url } from 'src/types/url';
|
||||
const content: url;
|
||||
const content: string;
|
||||
export default content;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -52,13 +52,13 @@
|
|||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"prettier": "^1.19.1",
|
||||
"raw-loader": "^4.0.2",
|
||||
"resolve-url-loader": "^3.1.1",
|
||||
"responsive-loader": "^1.2.0",
|
||||
"sass": "^1.26.10",
|
||||
"sass-loader": "^8.0.2",
|
||||
"sharp": "^0.23.4",
|
||||
"style-loader": "^1.2.1",
|
||||
"svg-url-loader": "^3.0.3",
|
||||
"terser-webpack-plugin": "^2.3.8",
|
||||
"ts-loader": "^6.2.2",
|
||||
"typescript": "^3.9.7",
|
||||
|
|
|
|||
|
|
@ -1,44 +1,36 @@
|
|||
import { Footer } from '../../types/portfolio';
|
||||
|
||||
import './footer.scss';
|
||||
import cvIcon from '../../static/icons/cv.svg';
|
||||
import emailIcon from '../../static/icons/email.svg';
|
||||
import { html } from '../../types/html';
|
||||
|
||||
export const generate = ({
|
||||
title,
|
||||
email,
|
||||
curiumVitaes,
|
||||
curriculaVitae,
|
||||
lastEditText,
|
||||
lastEdit,
|
||||
}: Footer): html => `
|
||||
<footer id="page-footer">
|
||||
<h2>${title}</h2>
|
||||
<ul>
|
||||
${curiumVitaes
|
||||
.map(
|
||||
(cv, i) =>
|
||||
`<li>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512.002 512.002" style="enable-background:new 0 0 512.002 512.002;" xml:space="preserve" width="512px" height="512px" class="">
|
||||
<path d="M394.667,42.667h-128c-11.782,0-21.333,9.551-21.333,21.333v128c0,11.782,9.551,21.333,21.333,21.333h128 c11.782,0,21.333-9.551,21.333-21.333V64C416,52.218,406.449,42.667,394.667,42.667z M290.347,192 c7.707-22.268,32.007-34.072,54.275-26.365c12.366,4.28,22.085,13.999,26.365,26.365H290.347z M309.333,117.333 c0-11.782,9.551-21.333,21.333-21.333C342.449,96,352,105.551,352,117.333c0,11.782-9.551,21.333-21.333,21.333 C318.885,138.667,309.333,129.116,309.333,117.333z M394.667,192h-1.387c-4.028-18.843-16.331-34.868-33.493-43.627 c17.25-16.053,18.221-43.051,2.167-60.301c-16.053-17.25-43.051-18.221-60.301-2.167c-17.25,16.053-18.221,43.051-2.167,60.301 c0.696,0.748,1.419,1.471,2.167,2.167c-17.203,8.734-29.548,24.763-33.6,43.627h-1.387V64h128V192z" class="active-path" fill="#31343F"/>
|
||||
<path d="M432.429,0.002C432.357,0.001,432.285,0,432.214,0h-282.88c-2.835-0.016-5.56,1.097-7.573,3.093L56.427,88.427 c-1.997,2.013-3.11,4.738-3.093,7.573v389.547c0.058,14.586,11.868,26.395,26.453,26.453h352 c14.668,0.177,26.701-11.57,26.878-26.238c0.001-0.072,0.001-0.144,0.002-0.215V26.88 C458.844,12.213,447.097,0.179,432.429,0.002z M437.334,485.547c0,2.828-2.292,5.12-5.12,5.12h-352 c-2.818,0.236-5.293-1.858-5.529-4.675c-0.012-0.148-0.018-0.296-0.018-0.445V100.374l64-64v44.16 c-0.057,2.627-2.173,4.743-4.8,4.8h-27.2v21.333h32c12.352-2.351,21.299-13.133,21.333-25.707V21.333h272.213 c2.828,0,5.12,2.292,5.12,5.12V485.547z" class="active-path" fill="#31343F"/>
|
||||
<rect x="192" y="256" width="170.667" height="21.333" class="active-path" fill="#31343F"/>
|
||||
<rect x="149.333" y="309.333" width="213.333" height="21.333" class="active-path" fill="#31343F"/>
|
||||
<rect x="149.333" y="362.667" width="213.333" height="21.333" class="active-path" fill="#31343F"/>
|
||||
<rect x="149.333" y="416" width="170.667" height="21.333" class="active-path" fill="#31343F"/>
|
||||
<rect x="341.334" y="416" width="21.333" height="21.333" class="active-path" fill="#31343F"/>
|
||||
</svg>
|
||||
<a id="cv-${i}" href="${cv.url}" target="_blank">${cv.name}</a>
|
||||
</li>`
|
||||
)
|
||||
.join('\n')}
|
||||
<li>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="512px" viewBox="0 0 512.00018 512" width="512px">
|
||||
<path d="m401.738281 442.710938c6.046875 9.242187 3.453125 21.636718-5.792969 27.683593-41.585937 27.195313-89.9375 41.582031-139.824218 41.605469-.039063 0-.082032 0-.121094 0-68.097656.003906-132.101562-26.234375-180.253906-73.890625-48.183594-47.683594-75.078125-111.46875-75.7343752-179.597656-.6601568-68.558594 25.4453122-133.210938 73.5039062-182.054688 48.066406-48.851562 112.265625-76 180.773437-76.45312475.5625 0 1.136719-.00390625 1.699219-.00390625 53.46875 0 104.816407 16.546875 148.613281 47.90625 43.277344 30.988281 75.519532 73.652344 93.238282 123.378906 3.707031 10.40625-1.722656 21.847656-12.125 25.554688-10.40625 3.707031-21.84375-1.722656-25.554688-12.125-30.898437-86.707032-112.84375-144.714844-204.195312-144.714844-.476563 0-.9375 0-1.414063.003906-57.796875.378906-111.964843 23.289063-152.523437 64.507813-40.546875 41.210937-62.570313 95.765625-62.015625 153.613281 1.132812 117.949219 98.019531 213.875 215.992187 213.875h.097656c42.097657-.019531 82.886719-12.148438 117.953126-35.082031 9.242187-6.046875 21.636718-3.453125 27.683593 5.792969zm110.261719-165.710938c0 50.179688-40.820312 91-91 91-32.0625 0-60.304688-16.667969-76.519531-41.796875-20.71875 26.058594-52.679688 42.796875-88.480469 42.796875-62.308594 0-113-50.691406-113-113s50.691406-113 113-113c28.277344 0 54.160156 10.441406 74 27.667969v-3.535157c0-11.042968 8.953125-20 20-20s20 8.957032 20 20v109.867188c0 28.121094 22.878906 51 51 51s51-22.878906 51-51c0-11.046875 8.953125-20 20-20s20 8.953125 20 20zm-183-21c0-40.25-32.746094-73-73-73-40.25 0-73 32.75-73 73 0 40.253906 32.75 73 73 73 40.253906 0 73-32.746094 73-73zm0 0" class="active-path" fill="#31343F"/>
|
||||
</svg>
|
||||
<a id="email" href="mailto:${email}">${email}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<aside class="other">
|
||||
<p>${lastEditText} <time datetime="${lastEdit.toISOString()}">${lastEdit.toLocaleDateString()}</time></p>
|
||||
</aside>
|
||||
</footer>
|
||||
<footer id="page-footer">
|
||||
<h2>${title}</h2>
|
||||
<ul>
|
||||
${curriculaVitae
|
||||
.map(
|
||||
(cv, i) => `
|
||||
<li>
|
||||
${cvIcon}
|
||||
<a id="cv-${i}" href="${cv.url}" target="_blank">${cv.name}</a>
|
||||
</li>
|
||||
`
|
||||
)
|
||||
.join('\n')}
|
||||
<li>
|
||||
${emailIcon}
|
||||
<a id="email" href="mailto:${email}">${email}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<aside class="other">
|
||||
<p>${lastEditText} <time datetime="${lastEdit.toISOString()}">${lastEdit.toLocaleDateString()}</time></p>
|
||||
</aside>
|
||||
</footer>
|
||||
`;
|
||||
|
|
|
|||
7
src/static/icons/cv.svg
Normal file
7
src/static/icons/cv.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M16 6h3a1 1 0 0 1 1 1v11a2 2 0 0 1 -4 0v-13a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1v12a3 3 0 0 0 3 3h11" />
|
||||
<line x1="8" y1="8" x2="12" y2="8" />
|
||||
<line x1="8" y1="12" x2="12" y2="12" />
|
||||
<line x1="8" y1="16" x2="12" y2="16" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 442 B |
5
src/static/icons/email.svg
Normal file
5
src/static/icons/email.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<circle cx="12" cy="12" r="4" />
|
||||
<path d="M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 307 B |
4
src/static/icons/github.svg
Normal file
4
src/static/icons/github.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 511 B |
6
src/static/icons/info.svg
Normal file
6
src/static/icons/info.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<line x1="12" y1="8" x2="12.01" y2="8" />
|
||||
<polyline points="11 12 12 12 12 16 13 16" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 331 B |
52
src/static/icons/loading.svg
Normal file
52
src/static/icons/loading.svg
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
|
||||
<g transform="rotate(0 50 50)">
|
||||
<rect x="45" y="2" rx="5" ry="5" width="10" height="10" fill="#b7455e">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(30 50 50)">
|
||||
<rect x="45" y="2" rx="5" ry="5" width="10" height="10" fill="#b7455e">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(60 50 50)">
|
||||
<rect x="45" y="2" rx="5" ry="5" width="10" height="10" fill="#b7455e">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(90 50 50)">
|
||||
<rect x="45" y="2" rx="5" ry="5" width="10" height="10" fill="#b7455e">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(120 50 50)">
|
||||
<rect x="45" y="2" rx="5" ry="5" width="10" height="10" fill="#b7455e">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(150 50 50)">
|
||||
<rect x="45" y="2" rx="5" ry="5" width="10" height="10" fill="#b7455e">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(180 50 50)">
|
||||
<rect x="45" y="2" rx="5" ry="5" width="10" height="10" fill="#b7455e">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(210 50 50)">
|
||||
<rect x="45" y="2" rx="5" ry="5" width="10" height="10" fill="#b7455e">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(240 50 50)">
|
||||
<rect x="45" y="2" rx="5" ry="5" width="10" height="10" fill="#b7455e">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(270 50 50)">
|
||||
<rect x="45" y="2" rx="5" ry="5" width="10" height="10" fill="#b7455e">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(300 50 50)">
|
||||
<rect x="45" y="2" rx="5" ry="5" width="10" height="10" fill="#b7455e">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(330 50 50)">
|
||||
<rect x="45" y="2" rx="5" ry="5" width="10" height="10" fill="#b7455e">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
5
src/static/icons/open.svg
Normal file
5
src/static/icons/open.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
|
||||
<path d="M20 12h-13l3 -3m0 6l-3 -3" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 340 B |
|
|
@ -1,5 +1,5 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
<?xml version="1.0"?>
|
||||
<svg version="1.1" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<path d="M256,0C114.833,0,0,114.844,0,256s114.833,256,256,256s256-114.844,256-256S397.167,0,256,0z M256,490.667
|
||||
C126.604,490.667,21.333,385.396,21.333,256S126.604,21.333,256,21.333S490.667,126.604,490.667,256S385.396,490.667,256,490.667
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 880 B After Width: | Height: | Size: 860 B |
|
|
@ -98,14 +98,6 @@ module.exports = {
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: 'svg-url-loader',
|
||||
options: {
|
||||
limit: 10 * 1024,
|
||||
noquotes: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(pdf)$/i,
|
||||
use: {
|
||||
|
|
@ -116,6 +108,10 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.svg$/i,
|
||||
use: 'raw-loader',
|
||||
},
|
||||
{
|
||||
test: /no-change.*(ico|html|txt)$/i,
|
||||
use: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue