Wondering what’s next for npm?Check out our public roadmap! »

    titanic-icons

    1.2.0 • Public • Published

    Titanic

    A collection of animated icons + javascript library.

    Preview

    Preview all icons

    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 --save
    

    API

    • titanic.isInitialized() -- just true/false flag

    • titanic.items -- list of titanic items

    • titanic.items[index].on(), titanic.items[index].off(), titanic.items[index].play() -- play animations of the titanic item by index

    • titanic.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.

    Magritte

    Keywords

    none

    Install

    npm i titanic-icons

    DownloadsWeekly Downloads

    4

    Version

    1.2.0

    License

    ISC

    Last publish

    Collaborators

    • avatar