ibm-design / icons Goto Github PK
View Code? Open in Web Editor NEWIBM Design Language Icons
Home Page: http://www.ibm.com/design/language/resources/icon-library
License: Other
IBM Design Language Icons
Home Page: http://www.ibm.com/design/language/resources/icon-library
License: Other
I've noticed that the IBM Design Language icon for "calender" has a few issues:
This icon set was downloaded on Aug 15, 2016, from http://www.ibm.com/design/language/resources/icon-library/
There are a few areas where padding is a little confusing or not stated correctly. I see the section on the https://github.com/IBM-Design/icons about padding, but what is small, medium or large? Is this for illustrator file versions or coded versions?
Maybe have visual examples of these instead? OR is that paragraph meant just for people who are contributing?
Here's what I've deduced from the Illustrator documents:
16x16 - No padding
24x24 - 1px
32x32 - 1px
64x64 - 2px
128x128 - 3px
This is strange because svgs are supposed to fix this problem.
I think its because the circles around the icons are made with a element instead of a which they should be so the browser can figure out the most optimal way to layout the pixels rather than specifying them exactly
https://github.com/IBM-Design/icons/blob/master/svg/action-based/add-new_32.svg?short_path=5b81d52#L8 Add new icons "circle"
SVGs unconsistently have background-icon-guides layers <g>
or nothing.
See for example:
When applying a fill to the save_16.svg
icon, the inner circle does not inherit the desired colour.
When installing the npm
module, using yarn
or the npm
client, the package fails to install if the Node.js version you're using is >5.
For example:
$ yarn add ibm-design-icons
yarn add v0.16.1
[1/4] ๐ Resolving packages...
[2/4] ๐ Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "^5.1.0".
error Found incompatible module
As a result, the module isn't installed in node_modules
and is unable to be used.
SVGS could use an aria-labeled-by="title"
with a title for better accessibility on screen readers.
Wondering if we have these somewhere and just aren't linking them.
https://www.ibm.com/design/language/resources/
Note: This have been approved by @hchughes already. @seejamescode can we create a PR and merge, all files have been included in the zipped folder below.
There should be a deploy hook on a release to publish to bower and npm.
We should expose the icons as named exports so the import UX can match up to this:
import { debug, api, tile-view } from 'ibm-design-icons';
Hi James and Matt! Can we merge these to our library? Thanks, Hayley
A designer's typical workflow in Sketch is to have a Sketch asset-file which contains assets, such as icons, open while they work on their prototype. They will then copy the assets from the asset-file and paste them into their prototype.
Feature: Cross-tool icons
As a designer
I want a cross-tool compatible IBM Design Language Icons module
So that I can prototype with IBM icons, regardless of the design tool I choose.
Scenario: svgs as canonical
Given that I need to upgrade an icon in the IBM Design icons
and that I need the new version of this icon available to other designers
and that designers may use multiple tools in their workflow
and that design assets need to work with multiple tools
When a I upgrade my icon
Then I need to create a canonical version of the upgraded icon
and that version should be importable by Sketch
and that version should be importable by Illustrator
and that version should be the source file in the IBM Icons module.
Scenario: copy svgs when prototyping
Given that I am building a prototype in Sketch
and that I need icons from IBM design in my prototype
and that said icons are stored as svg files
and that I need said icons compiled into an organized Sketch file
When I want to use IBM icons in my prototype
Then I need all IBM icons in a sketch file
and I need those icons in a grid
and I need said Sketch file to be generated using the canonical svg files.
Cross-tool icons
Request: a "locate me" icon, for when something like this is triggered manually:
Several options for glyphs:
Theres an example here. We'd need to update our illustrator file's art boards to use it which wouldn't be terrible. Or we need to create a new script to do it for us.
All svg icons with viewbox 32x32 seem to end with _32.svg except for this one:
https://github.com/IBM-Design/icons/blob/master/svg/action-based/down-to-bottom.svg
Pngs include a lot of metadata that we don't need to ship. When generating the dist we should strip that content.
The PNG files I've uploaded need to be added to the IBM Design Language library. I will also create a separate issue to add the SVG's and replace the .AI files shortly. The glyph section should also now be broken out by three separate sections of action, formatting and object based glyphs, just like the icons.
Designed in the Watson style (i.e., thin lines, curved edges).
I could also make a version that is more traditionally IDL style (sharp edges, thicker lines) and non-glyph versions if there's interest.
Thought I'd just go ahead and submit. :)
new_window.svg.zip
There are a number of files that aren't related to the purpose of the repo checked into the repo (e.g. system files etc).
Examples:
We should probably clean those up. We may also want to update the .gitignore file accordingly.
Some UIs are customizable in terms of theme. This would help.
small label tweak...
change label for icon in 'object' set, current label "insecure" change to "unsecure"
Turning an icon in to a compound path affords a handful of benefits. A group can be accidentally ungrouped pretty easily in a working session, while a compound path is a little more resilient.
We also save a few bits when exporting a compound path SVG vs multiple elements. As an example, the zoom icon as multiple elements is 429 bytes:
<g>
<path d="M44,0C19.7,0,0,19.7,0,44c0,24.3,19.7,44,44,44c24.3,0,44-19.7,44-44C88,19.7,68.3,0,44,0z M44,84C21.9,84,4,66.1,4,44
S21.9,4,44,4c22.1,0,40,17.9,40,40S66.1,84,44,84z"/>
<rect x="91.5" y="80.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -41.4214 100)" width="17" height="39.6"/>
<circle cx="80" cy="80" r="4"/>
<polygon points="48,20 40,20 40,40 20,40 20,48 40,48 40,68 48,68 48,48 68,48 68,40 48,40 "/>
</g>
vs as a compound path at 316 bytes:
<path d="M44,0C19.7,0,0,19.7,0,44c0,24.3,19.7,44,44,44c24.3,0,44-19.7,44-44C88,19.7,68.3,0,44,0z M44,84C21.9,84,4,66.1,4,44
S21.9,4,44,4c22.1,0,40,17.9,40,40S66.1,84,44,84z M120,108l-12,12L80,92l12-12L120,108z M80,84c-2.2,0-4-1.8-4-4s1.8-4,4-4
s4,1.8,4,4S82.2,84,80,84z M48,40h20v8H48v20h-8V48H20v-8h20V20h8V40z"/>
Or something similar. In its current state the svgs aren't the easiest to consume. It would be great to have some kind of dist that put the svgs into a single folder (hopefully) and already minified. We could create various sprite sheets/icon fonts of all the icons to be easily consumable as well. Would you take a PR for this?
I've created 16px/24px glyphs for the info icon. Submitting for review.
Saved icon file out as a PDF since github won't let me upload SVGs / AIs.
Happy to answer any questions or make any revisions.
Noticed that we don't have a dedicated icon for sorting. We've had a 16px variant that we've used on our team for a while. Used the icon builder template to build out the rest of the sizes. Figured this is something other products could benefit from as well.
By separating all of the icons into separate files, designers have lost the ability to see the context for all of the icons. We need an export script that will combine all of the individual files into a single art board.
Laptop most likely.
I've seen this done as a bell, as it is here on GitHub. Seems to work well. Has a dot on it when there is new activity, but I'd prefer a number. Either way.
Currently there are 5 different icon sizes for every single icon, 16px, 24px, 32px, 64px, and 128px. In #18 there started a conversation about the usefulness of every step along the way and finding a middle ground between having super legible icons and the general maintainability of the project.
The .ai files currently have icons and glyphs on the same art board. They should be split apart onto their own artboards so they can be easily exported
This enables auto exporting from a script #16
I can't see files for download_16.svg or download_24.svg.
Are they supposed to be created?
Icons in the .AI files right now have a black fill. when an SVG is exported with from these, they get stuck with a fill="#000000"
attribute. This makes it impossible to style the colors of these icons through CSS on the web.
If the fill of the icons was switched over to registration, the fill attribute goes away and colors can be controlled through CSS.
The microphone-recording icon only exists as a png.
I think its about time for a 2.0.0 with all the renames
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.