-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[K7] Add Icon component #12920
[K7] Add Icon component #12920
Conversation
@@ -206,7 +206,7 @@ | |||
"@elastic/eslint-plugin-kibana-custom": "1.0.3", | |||
"angular-mocks": "1.4.7", | |||
"babel-eslint": "7.2.3", | |||
"bemify": "0.1.4", | |||
"bemify": "0.1.2", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I had to downgrade because it doesn't look like 0.1.4 exists yet: https://www.npmjs.com/package/bemify
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Minor comments. Also told CJ eventually we'll eventually need to control color with all of our icons, but he wants to just test this stuff for now. Looks good.
@include component('kuiIcon') { | ||
display: inline-block; | ||
|
||
@include modifier('xSmall') { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can delete anything below 16px. We never go below 16px and I'd rather not even allow it. They become unreadable.
<path id="search-a" d="M11.2709852,11.9779932 L15.14275,15.85075 C15.24075,15.94775 15.36875,15.99675 15.49675,15.99675 C15.62475,15.99675 15.75275,15.94775 15.85075,15.85075 C16.04575,15.65475 16.04575,15.33875 15.85075,15.14275 L12.2861494,11.5790625 C14.6668581,8.83239759 14.5527289,4.65636993 11.9437617,2.04675 C9.21444459,-0.68225 4.77355568,-0.68225 2.04623804,2.04675 C-0.682079347,4.77575 -0.682079347,9.21775 2.04623804,11.94675 C3.36890712,13.26875 5.12646738,13.99675 6.99499989,13.99675 C7.27093085,13.99675 7.49487482,13.77275 7.49487482,13.49675 C7.49487482,13.22075 7.27093085,12.99675 6.99499989,12.99675 C5.39240085,12.99675 3.88677755,12.37275 2.7530612,11.23975 C0.414646258,8.89975 0.414646258,5.09375 2.7530612,2.75375 C5.09047639,0.41375 8.89552438,0.41475 11.2369386,2.75375 C13.5753535,5.09375 13.5753535,8.89975 11.2369386,11.23975 C11.0419873,11.43475 11.0419873,11.75175 11.2369386,11.94675 C11.2479153,11.9577858 11.2592787,11.9682002 11.2709852,11.9779932 Z"/> | ||
</defs> | ||
<g fill="none" fill-rule="evenodd" transform="translate(1 1)"> | ||
<mask id="search-b" fill="#fff"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Might want to look at what's coming out of these exports. Likely, depending on what layer you're selecting to export, it's pulling in some junk from sketch. Not a big deal for now if it looks fine in the render.
* Use bemify v0.1.2. * Add Icon component with SVG icon support. Add Search and User icons.
* Use bemify v0.1.2. * Add Icon component with SVG icon support. Add Search and User icons.
* Use bemify v0.1.2. * Add Icon component with SVG icon support. Add Search and User icons.
* Use bemify v0.1.2. * Add Icon component with SVG icon support. Add Search and User icons.
@kjbekkelund Here's an example of the bemify mixins in use, in case you're interested.