<button class="icon-button" type="button"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-50eb6f-title">
<title id="icon-50eb6f-title">Info</title>
<use xlink:href="#icon-plus"></use>
</svg></button>
#{link && 'a' || tag || 'button'}.icon-button(
class=classList(
secondary && 'icon-button--secondary'
),
type=type || (!link && !tag) && 'button',
href=link,
disabled=disabled,
)&attributes(attr)
//- Icon
+include('@icon', { icon, title: iconTitle, attr: { class: 'icon-button__icon' } })
{
"icon": "plus",
"iconTitle": "Info"
}
import h from 'hyperscript';
import classNames from 'classnames';
import generateIcon from '../../_particles/icon/generate-icon';
export default function iconButton({
tag, type, title = false, icon, link,
disabled = false, classes = false, tabindex = '0', ariaHidden = false, secondary = false,
}) {
return h(`${(link && 'a') || tag || 'button'}`, {
className: classNames(
'icon-button',
secondary && 'icon-button--secondary',
classes && classes,
),
type: type || (!link && 'button'),
href: link,
disabled,
attrs: {
tabindex,
'aria-hidden': ariaHidden,
},
}, generateIcon({ title, icon, classes: ['icon-button__icon'] }));
}
.icon-button {
color: $color-blue;
display: inline-block;
height: 3rem;
line-height: 1;
position: relative;
transition: color 0.2s;
width: 3rem;
&[disabled] {
cursor: not-allowed;
opacity: 0.5;
}
}
.icon-button__icon {
height: 3rem;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 3rem;
}
There are no notes for this item.