kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Move inline SVGs to includes. (#23297)

Browse source 
Also:

* compress them with SVGOMG
* add titles
* add `focusable="false"`
This commit is contained in:
XhmikosR 2017-08-11 14:55:54 +03:00 committed by GitHub
parent ce35fdd527
commit 10bb79a250
5 changed files with 7 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
_includes/icons/download.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Download icon</title><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 482 B

1
_includes/icons/import.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Import icon</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 439 B

1
_includes/icons/lightning.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Lightning icon</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 442 B

12
index.html
View file

@ -32,9 +32,7 @@ layout: home
<div class="masthead-followup row m-0 border border-white">
<div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
<svg class="text-primary mb-2" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M28 22 L28 30 4 30 4 22 M16 4 L16 24 M8 16 L16 24 24 16" />
</svg>
{% include icons/import.svg width="32" height="32" class="text-primary mb-2" %}
<h3>Installation</h3>
<p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>
@ -55,9 +53,7 @@ bower install bootstrap#v{{ site.current_version }}
<div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
<svg class="text-primary mb-2" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30" />
</svg>
{% include icons/download.svg width="32" height="32" class="text-primary mb-2" %}
<h3>Bootstrap CDN</h3>
<p>When you only need to include Bootstrap's compiled CSS or JS, you can use the Bootstrap CDN.</p>
@ -78,9 +74,7 @@ bower install bootstrap#v{{ site.current_version }}
<div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
<svg class="text-primary mb-2" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M18 13 L26 2 8 13 14 19 6 30 24 19 Z" />
</svg>
{% include icons/lightning.svg width="32" height="32" class="text-primary mb-2" %}
<h3>Official Themes</h3>
<p>
Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools.