twbs / icons Goto Github PK
View Code? Open in Web Editor NEWOfficial open source SVG icon library for Bootstrap.
Home Page: https://icons.getbootstrap.com
License: MIT License
Official open source SVG icon library for Bootstrap.
Home Page: https://icons.getbootstrap.com
License: MIT License
[icon request] thumb up/down
Also, tweak accessibility from upstream (aria-current), add active
etc
In addition to "file text" and "file spreadsheet" there should be one for presentations. It could feature a diagram. 📈📉📊
Icon to indicate when the Wi-Fi signal is weak.
It would be cool if we could toggle the rounded edges like https://danklammer.com/articles/svg-stroke-ftw/#give-it-a-spin
We'll need to inline the svg's then. The only downside is that we can't include them as <img>
anymore, since those images won't have the rounded corners anymore.
Would love an airplane with takeoff and land icon.
https://imageog.flaticon.com/icons/png/512/68/68542.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF
We currently use Bootstrap 3 with Glyphicons but want to update to Bootstrap 4 (and 5 once it comes out) and like the style of the icon set. However there are not Log in/out icons anymore like glyphicons glyphicon-log-in
or fontawesomes sign-in-alt
(as well as corresponding logout icons).
Could you add some download icon please? E.g.arrow down with line or box under.
So that we can properly set spacing around SVGs with CSS (otherwise we have to figure out the spacing inside the SVGs and take it into account when applying margins/paddings).
Add a script for changing the HTML, attribute order, and generate class names based on the file name.
After several unsuccessful attempts, I try to get an answer here. :D
I try to use the icon library together with Bootstrap and Rails 6.0. Bootstrap is running, but I just can't get it to load the SVG icons.
I think I have to load them in Rails 6.0 in the application.js/scss somehow. Can anyone help me, or am I completely on the wrong track?
The following icons seem to be named inconsistently from their peers:
arrow bar bottom
(should be down
)brightness fill {high,low}
have fill
at the end?skip {end,backward} fill
icons names are swappedbook half fill
just be book half
?Cheers!
Would be handy for color pickers. palette
and palette-fill
(or color-palette
and color-palette-fill
)
The "You can also use the SVG within your CSS" use case doesn't allow for color customization without touching the SVG fill
value. We should be able to dynamically load the untouched source SVGs and customize them via css only (like when you import Bootstrap without modifying it and properly override variables), which would be possible via a font-family approach (allowing the use of Bootstrap color variables for proper icons theming). Is this in the pipeline?
Add metadata or categories to make it easier to find icons.
Such as:
All of the fill
'ed versions of icons should be consistently filled on the left side.
Some filled Icons have the right side filled, where as the majority are left filled (ie. diamond, circle, triangle and square should be left filled)
Perhaps all *-half
fill icons should be filled on the left, and maybe have an alt *-half-right
version filled on the right?
Use-case example: ratings widget which shows #.5
rating. LTR would use the default half icon (*-half
), while RTL could use the *-fill-right
version). Typically users would want the star icons, but may use other icons for this purpose.
/cc @mdo
(context: working on a rating component that allows users to select their base icon, and noticed the inconsistent half side being filled)
It appears that the icons, when paced inside dropdowns and butons, is slightly off vertically (baseline is not quite lined up with the font), as well as when icons are placed inline with text.
A fix we have implemented is as follows:
.bi {
vertical-align: -0.125em;
margin-bottom: calc(-0.125em / 2);
}
// Make icons slightly larger (aesthetically) in input group prepend/append
.input-group {
.input-group-text {
.bi {
transform: scale(1.5);
}
}
}
// Make icons slightly larger (aesthetically) in buttons and dropdowns
.btn,
.dropdown {
.bi {
transform: scale(1.5);
// reset the bottom margin from above
margin-bottom: 0;
}
}
library
Useful when making a app library
focusable="false"
and role="img"
once and for all and adapt the svgo config to take this into considerationI have an open source SVG renderer which really struggles to render these. Your elliptical arc commands by looks of things do not follow the SVG spec, elliptical arcs should contain 7 parameters as its command, these icons vary from 5-10, These only seem to render inside browsers and Sketch, Illustrator, IconJar all cant render these correctly.
Command like : a8 8 0 100-16 8 8 0 000 16
is completely invalid according to the SVG spec.
How is this supposed to be parsed? is it 8 8 0 100 -16 8 0
then 0 0 0 16
? But then 16 would have to be a 1 or a 0 for the sweeping arc.
Cheers.
@XhmikosR I tried to bring this over from Bootstrap proper and it ended up causing tons of JS errors. I'm guessing I was missing some linting support files or something. Might ping you in a PR on this later.
Thank you for creating these icons. One suggestion I have would be to add some support on shifting colors of the svgs with the image tag. Either using CSS color filters or js to change the color.
Here is an example - https://blog.union.io/code/2017/08/10/img-svg-fill/
For beginners, svg's are confusing with all of the coordinates. So I think it would be nice to make svg's work the same way as jpegs and pngs... with the additional super powers of scaling and color changing.
Here is a codepen experimenting with filters - https://codepen.io/JacobLett/pen/LYYwQjz
The skip-*
Icons are slightly mixed up name-wise:
Also, the skip-*-fill
SVGs have a hardcoded stroke color or #000
which always shows as black, regardless of current font color. Perhaps this should be currentColor
instead of #000
(or set stroke="currentColor"
on the <svg>
root element.
<svg class="bi bi-skip-end-fill" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<!-- this shoud be `currentColor` not `#000` -->
<path stroke="#000" stroke-linecap="round" d="M2.5 6v8"/>
<path d="M2.904 10.697l6.363 3.692c.54.313 1.233-.066 1.233-.697V6.308c0-.63-.693-1.01-1.233-.696L2.904 9.304a.802.802 0 000 1.393z"/>
<path d="M10.404 10.697l6.363 3.692c.54.313 1.233-.066 1.233-.697V6.308c0-.63-.692-1.01-1.233-.696l-6.363 3.692a.802.802 0 000 1.393z"/>
</svg>
cc/ @mdo
shopping cart
shopping bag
shopping basket
:)
Wide gear icons have a wider illustration than viewBox dimensions.
Currently there are single chevron icons, but it would be nice to have double chevron icons as well.
Building sites … WARN 2020/03/19 20:55:58 found no layout file for "HTML" for kind "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
and see if we can remove the layout from icon content files and leverage Hugo's hierarchy lookup order
[icon request] thumb shop cart
Well, i guess many people in e-commerce business will need one
To those confined how about an icon or two for restaurants? Crossed utensils is a common theme. Thank you.
Add copy to clipboard for SVG code in the docs (clicking the icon should do it)
Ethernet network connector.
Couple grid icons that should be outlined are filled.
Ideally we can have permalink pages a la Octicons where we show sizes, multiple copy buttons, and SVG code. See https://octicons.github.com/icon/alert/ for an example. Thinking icons.getbootstrap.com/icon/{{name}}
as the same syntax for those.
@mdo WDYT? Instead of doing that custom stuff we do now, this should be a better solution.
A puzzle piece icon (fill and outline) would be excellent...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.