titanic-icons v1.2.0
Titanic
A collection of animated icons + javascript library.
Installation
You can install it either via CDN or npm.
CDN
Insert this string to your HTML head:
<script src="https://cdn.rawgit.com/icons8/titanic/e2168ea3/dist/js/titanic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script>And initialize it before the body closes:
<script>
var titanic = new Titanic();
</script>This way, you can add icons anywhere in your HTML using this tag:
<div class='titanic titanic_chat'></div>Where chat can be any of these:
- caps
- chat
- checkbox
- expand
- expensive1
- expensive2
- idea
- mailbox
- mic
- no_microphone
- online
- pause
- quick_mode
- shopping_cart
- smile
- stop
- unlock
- zoom
Hosting your images
If you'd like to host your images on your server instead of rawgit, pass the base URL with the init() function:
titanic.begin('/my/base/directory/');Then, if you have a div with id="chat", Titanic will search for icons in /my/base/directory/chat.json.
npm
npm install titanic-icons --saveAPI
titanic.isInitialized()-- just true/false flagtitanic.items-- list of titanic itemstitanic.items[index].on(), titanic.items[index].off(), titanic.items[index].play()-- play animations of the titanic item by indextitanic.on(token), titanic.off(token), titanic.play(token)-- play animations of the titanic item by token (name)
Example
<head>
<!--Inserting the scripts once for the whole page-->
<script src="https://cdn.rawgit.com/icons8/titanic/e2168ea3/dist/js/titanic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script>
</head>
<body>
<!--Inserting an icon-->
<div class='titanic titanic-checkbox'></div>
<!--Initializing-->
<script>
var titanic = new Titanic();
</script>
<!--Clicking turns this icon on-->
<button onclick="titanic.on(getElementById('checkbox').value)">On</button>
</body>Credits
JavaScript is basically bodymovin plus few lines of my code. It's a solid library with an awesome name. Thank you, guys.
Icons are created by Margarita Ivanchikova from Icons8. She has many more awesome animations in her portfolio.
