twbs / icons Goto Github PK

[icon request] thumb shop cart

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

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

Also, tweak accessibility from upstream (aria-current), add active etc

Couple grid icons that should be outlined are filled.

Icon request for octagon and octagon-fill (and maybe octagon-half to be consistent with the other basic shape icons) :

Font color is not applied to "file-ruled", "mic-mute", "mic-mute-fill", "soundwave" icons or some paths of it due to having hard coded stroke color of black.

• npm
• GitHub

Add copy to clipboard for SVG code in the docs (clicking the icon should do it)

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

https://image.flaticon.com/icons/svg/68/68380.svg

https://imageog.flaticon.com/icons/png/512/61/61212.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF

@mdo WDYT? Instead of doing that custom stuff we do now, this should be a better solution.

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?

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

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)

shopping cart
shopping bag
shopping basket

:)

Would be handy for color pickers. palette and palette-fill (or color-palette and color-palette-fill)

Currently there are single chevron icons, but it would be nice to have double chevron icons as well.

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

Could you add some download icon please? E.g.arrow down with line or box under.

Icon to indicate when the Wi-Fi signal is weak.

A translations or languages icon would be useful for languages dropdowns, like :

Add metadata or categories to make it easier to find icons.

Such as:

• Arrows
• Brands
• Files
• Shapes
• Technology

Would be nice to have an icon for sharing, similar to:

and possibly a fill version with the circles filled

There is an extra circle in the top left of tv-fill.svg

There is a pentagon and a octagon shape, but no hexagon.

To those confined how about an icon or two for restaurants? Crossed utensils is a common theme. Thank you.

In addition to "file text" and "file spreadsheet" there should be one for presentations. It could feature a diagram. 📈📉📊

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;
  }
}

Before

After

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

Add a script for changing the HTML, attribute order, and generate class names based on the file name.

A puzzle piece icon (fill and outline) would be excellent...

Blocking

• Use the upstream favicons
• Don't use the master dist CSS. This can break any time
• Move to Hugo (includes removing symlinks and timestamped CSS)
• Add code snippet and examples from Bootstrap for usage section
• Social icons
• page description
• social meta
• Add license to the repo
• See if we need to drop width/height. With these the icons aren't responsive? Icons aren't responsive by design, but they can easily be modified for different dimensions by changing those attributes or custom CSS (like our docs). – @mdo
• Verify if we need focusable="false" and role="img" once and for all and adapt the svgo config to take this into consideration
• Stop inlining all icons; this results in huge page size/DOM size This is a feature I want to keep. – @mdo
• Add testing
  • HTML validation
  • broken links
  • CI

Non-blocking

• Add 404 page
• Move to Actions for automated releases on tag
• Move the hardcoded SVGs to includes
• Do we need the search button? Seems useless since filtering happens when typing
• Move list.js in the repo

Wide gear icons have a wider illustration than viewBox dimensions.

The following icons seem to be named inconsistently from their peers:

• arrow bar bottom (should be down)
• shouldn’t brightness fill {high,low} have fill at the end?
• skip {end,backward} fill icons names are swapped (Duplicate #84)
• shouldn’t book half fill just be book half?

Cheers!

library Useful when making a app library

[icon request] thumb up/down

Ethernet network connector.

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

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.

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.

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?

Well, i guess many people in e-commerce business will need one

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

I would like to see a half filled version of the eye slash icon, similar to: