creativetimofficial / argon-design-system

Argon - Design System for Bootstrap 4 by Creative Tim
https://www.creative-tim.com/product/argon-design-system
Other
2.47k stars 491 forks source link

not really a issue but maybe a fix #151

Closed xpectmore closed 3 years ago

xpectmore commented 3 years ago

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= ...

http://fonts.googleapis.com/css?family=Cabin+Sketch&text=1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%20

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)

github-actions[bot] commented 3 years ago

@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