https://github.com/kevnk/tricons
Common icons—customizable via LESS—that morph from one to another with CSS transition; inspired by (but not using) SVG animated icons.
https://github.com/kevnk/tricons
css-animations css-transitions icons svg-animated-icons
Last synced: 8 months ago
JSON representation
Common icons—customizable via LESS—that morph from one to another with CSS transition; inspired by (but not using) SVG animated icons.
- Host: GitHub
- URL: https://github.com/kevnk/tricons
- Owner: kevnk
- Created: 2015-08-14T22:12:40.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-09-04T22:36:35.000Z (almost 11 years ago)
- Last Synced: 2025-02-08T22:41:53.622Z (over 1 year ago)
- Topics: css-animations, css-transitions, icons, svg-animated-icons
- Language: CSS
- Homepage: https://codepen.io/kevnk/pen/KpJVVG
- Size: 293 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tricons
Common icons—customizable via LESS—that morph from one to another with CSS transition; inspired by (but not using) SVG animated icons.
## Usage
> __TL;DR;__ for a full example, view `src/index.html` and `src/styles/less/styles.less`
#### 1. Bower install
```bash
$ bower install -S tricons
```
#### 2. Import the tricons mixin
```less
@import 'bower_components/tricons/tricons';
// Optionally set the default tricon
// NOTE: if you change default-tricon, be sure to add/remove it from the list of @tricons below
@default-tricon: hamburger-menu;
// Optionally remove unused icons from this list to slim down on your CSS
@tricons: hamburger-menu, x, arrow-left, arrow-right, arrow-up, arrow-down, plus, minus, loading, caret-up, caret-down, caret-left, caret-right, heart;
// Optionally customize tricons default values
@tricon-thickness: 2px;
@tricon-min-width: 40px;
@tricon-height: 40px;
@tricon-pad-vert: 0;
@tricon-pad-horz: 0;
@tricon-color: #fff;
@tricon-color-hover: #fff;
@tricon-bg-color: #2A97EF;
@tricon-bg-color-hover: saturate(lighten(#2A97EF, 5%), 5%);
```
#### 3. Create some customized tricon buttons with your less
```less
.my-custom-tricon {
@thickness: 1px;
@min-width: 60px;
@height: 60px;
@pad-vert: 10px;
@pad-horz: 20px;
@color: #fff;
@color-hover: #fff;
@bg-color: #FEEA3A;
@bg-color-hover: saturate(lighten(#FEEA3A, 5%), 5%);
.tricon(@thickness, @min-width, @height, @pad-vert, @pad-horz, @color, @color-hover, @bg-color, @bg-color-hover);
}
```
#### 4. HTML Markup
```html
Text right of icon
```
__NOTE:__ if you want the text on the left of the icon, just move that element before the 3 empty spans
#### 5. Javascript to toggle `data-tricon` attribute
Use the following or roll your own:
```js
```