How to use @hig/icons - 8 common examples
To help you get started, we’ve selected a few @hig/icons examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Autodesk / hig / packages / side-nav / src / Module / presenters / TitlePresenter.js View on Github 
className={css(styles.wrapper)}
onClick={handleClick}
onKeyDown={handleKeyDown}
role={role}
tabIndex={tabIndex}
target={wrapperTarget}
>
<div>{icon}</div>
<div>{title}</div>
{isExternalLink && (
<div>
</div>
)}
);
}}render() {
if (this.props.size === iconSizes.PX_24) {
return ;
}
return ;
}
}{({ resolvedRoles, metadata }) => {
const styles = stylesheet(this.props, resolvedRoles);
const size =
metadata.densityId === "medium-density"
? iconSizes.PX_24
: iconSizes.PX_16;
return (
{title}
{this._renderExternalLinkIcon(styles, size)}
);onMouseOver={onMouseOver}
role={role}
tabIndex="0"
target={wrapperTarget}
>
{title}
{isExternalLink ? (
<div>
</div>
) : null}
)}import React, { Component } from "react";
import PropTypes from "prop-types";
import { ExternalLink16, ExternalLink24, sizes as iconSizes } from "@hig/icons";
export default class ExternalLinkIcon extends Component {
static propTypes = {
/** Size of the icon */
size: PropTypes.oneOf(Object.values(iconSizes)),
/** Color of the icon */
color: PropTypes.string
};
static defaultProps = {
size: iconSizes.PX_24
};
render() {
if (this.props.size === iconSizes.PX_24) {
return ;
}
return ;
}
}role={role}
tabIndex="0"
target={wrapperTarget}
>
{title}
{isExternalLink ? (
<div>
</div>
) : null}
)}onClick={handleClick}
onKeyDown={handleKeyDown}
role={role}
tabIndex={tabIndex}
target={wrapperTarget}
>
<div>{icon}</div>
<div>{title}</div>
{isExternalLink && (
<div>
</div>
)}
);
}}{({ resolvedRoles, metadata }) => {
const styles = stylesheet(this.props, resolvedRoles);
const size =
metadata.densityId === "medium-density"
? iconSizes.PX_24
: iconSizes.PX_16;
return (
{title}
{this._renderExternalLinkIcon(styles, size)}
);
}}
