Icons
icon-barcode
icon-basketball
icon-calendar
icon-cart
icon-change-status
icon-check
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-up
icon-circle-x
icon-clock
icon-daxko
icon-edit-person
icon-email
icon-facebook-logo
icon-facebook
icon-gear
icon-give
icon-globe
icon-heart
icon-history
icon-house
icon-instagram-logo
icon-lock
icon-logout
icon-meatball-menu
icon-megaphone
icon-paper-airplane
icon-pen-inverted
icon-pen
icon-people
icon-person-card
icon-phone
icon-pin
icon-printer
icon-profile
icon-question-mark
icon-search
icon-trash
icon-twitter-logo
icon-twitter
icon-upload
icon-users-group
icon-version
Implementing Icons
React
If you’re using React, a React helper class is available to embed the icons.
var React = require('react')
, Icon = require('daxko.design/lib/icon');
var MyComponent = React.createClass({
render: function() {
return (
<Icon name="chevron-right" />
);
}
});
Html
If you’re not using React, you will manually need to include the icon svg set. CSS Tricks provides some best practice tips for including SVG icons.
<svg class="icon-barcode">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-barcode"></use>
</svg>
Styling the Icons
The icons can be styled naturally through CSS.
[class*=icon-] {
stroke: #000;
fill: #000;
width: 48px;
height: 48px;
}