not really a issue but maybe a fix
xpectmore opened this issue · comments
are 2 svgs can replace the blue.png
1. without anything is few bytes(800) with system fonts (800)
<!-- viewBox="0 0 22.437 22.054" -->
<svg width="180px" height="70px" version="1.1" viewBox="0 0 112 50" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-279.82 -44.158)" fill="#00f" stroke="#00f" stroke-width=".26458px"><path d="m292.44 49.618 6.4725 0.0439 3.1977 5.627-3.2742 5.5831-6.472-0.0439-3.1982-5.627zm0.39739 0.67593-2.8779 4.9072 2.8107 4.9454 5.6885 0.0388 2.8779-4.9067-2.8107-4.946z"/><path d="m283.25 44.29 6.4725 0.0439 3.1977 5.627-3.2742 5.5831-6.472-0.0439-3.1982-5.627zm0.39739 0.67593-2.8779 4.9072 2.8107 4.9454 5.6885 0.0388 2.8779-4.9067-2.8107-4.946z"/><path d="m283.33 54.825 6.4725 0.0439 3.1977 5.627-3.2742 5.5831-6.472-0.0439-3.1982-5.627zm0.39739 0.67593-2.8779 4.9072 2.8107 4.9454 5.6885 0.0388 2.8779-4.9067-2.8107-4.946z"/></g><g><text x="23" y="19" font-family="Verdana" font-size="22" fill="blue">ARGON</text></g></svg>
2.with a google font included
<!-- viewBox="0 0 22.437 22.054" -->
<svg width="180px" height="70px" version="1.1" viewBox="0 0 112 50" xmlns="http://www.w3.org/2000/svg">
<style>text.argon {
font-family: 'Noto Sans Display';
font-style: normal;
font-weight: 100;
font-stretch: normal;
font-display: swap;
src: url('data:application/font-woff2;charset=utf-8;base64,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') format('woff2');
}
</style><g transform="translate(-279.82 -44.158)" fill="#00f" stroke="#00f" stroke-width=".26458px"><path d="m292.44 49.618 6.4725 0.0439 3.1977 5.627-3.2742 5.5831-6.472-0.0439-3.1982-5.627zm0.39739 0.67593-2.8779 4.9072 2.8107 4.9454 5.6885 0.0388 2.8779-4.9067-2.8107-4.946z"/><path d="m283.25 44.29 6.4725 0.0439 3.1977 5.627-3.2742 5.5831-6.472-0.0439-3.1982-5.627zm0.39739 0.67593-2.8779 4.9072 2.8107 4.9454 5.6885 0.0388 2.8779-4.9067-2.8107-4.946z"/><path d="m283.33 54.825 6.4725 0.0439 3.1977 5.627-3.2742 5.5831-6.472-0.0439-3.1982-5.627zm0.39739 0.67593-2.8779 4.9072 2.8107 4.9454 5.6885 0.0388 2.8779-4.9067-2.8107-4.946z"/></g><g><text class="argon" x="23" y="19" font-family="Verdana" font-size="22" fill="blue">ARGON</text></g></svg>
to reproduce this consider eg using fonts.google.com (free fonts ,apache license) by adding after the link google provided (if you use that in production remember to download all zip and include copyright text) : &text= ...
then to replicate the given example with another font (similar .woff2 ,from anywhere ,free copyright)
download any apache php server ,create a folder "argonexample" ,edit a index.php inside
put this and a file font.woff2 (inside that folder)
<?php
header('Content-type: text/css');
?>@font-face {
font-family: 'Noto Sans Display';
font-style: normal;
font-weight: 100;
font-stretch: normal;
font-display: swap;
src: url('data:application/font-woff2;charset=utf-8;base64,<?php
echo( base64_encode(implode('',file('font.woff2'))));
?>') format('woff2');
}
after you call it localhost/argonexample/ you should get similar output:
@font-face {
font-family: 'Noto Sans Display';
font-style: normal;
font-weight: 100;
font-stretch: normal;
font-display: swap;
src: url('data:application/font-woff2;charset=utf-8;base64,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') format('woff2');
}
the same method you can use to themes you provided free
(dont't forget to add license from google)
@xpectmore this issue was automatically closed because it did not follow the bellow rules:
IMPORTANT: Please use the following link to create a new issue: https://www.creative-tim.com/new-issue/argon-design-system **If your issue was not created using the app above, it will be closed immediately.** Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit: 👉 https://www.creative-tim.com/bundles 👉 https://www.creative-tim.com