├── .eslintrc.js
├── docs
└── images
│ ├── magritte.gif
│ └── animated-icons-preview.gif
├── src
├── js
│ ├── titanic-icon.js
│ └── titanic.js
├── index.html
└── icons
│ ├── expand-arrow.json
│ ├── forward-arrow.json
│ ├── stop.json
│ ├── checkbox.json
│ ├── speech.json
│ ├── install.json
│ ├── zoom.json
│ ├── smile.json
│ ├── menu-minus.json
│ ├── shield.json
│ ├── unlock.json
│ ├── volume-1.json
│ └── power.json
├── package.json
├── demo
├── styles
│ └── demo.css
└── index.html
├── .gitignore
├── visual-studio-code-snippet.json
├── dist
├── js
│ └── titanic.min.js
├── icons
│ ├── expand-arrow.json
│ ├── forward-arrow.json
│ ├── stop.json
│ ├── checkbox.json
│ ├── speech.json
│ ├── install.json
│ ├── zoom.json
│ ├── smile.json
│ ├── menu-minus.json
│ ├── shield.json
│ ├── unlock.json
│ ├── volume-1.json
│ └── power.json
└── maps
│ └── titanic.min.js.map
├── gulpfile.js
└── readme.md
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | extends: 'standard'
3 | }
--------------------------------------------------------------------------------
/docs/images/magritte.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/icons8/titanic/HEAD/docs/images/magritte.gif
--------------------------------------------------------------------------------
/docs/images/animated-icons-preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/icons8/titanic/HEAD/docs/images/animated-icons-preview.gif
--------------------------------------------------------------------------------
/src/js/titanic-icon.js:
--------------------------------------------------------------------------------
1 | /* jshint -W097 */
2 | 'use strict';
3 |
4 | export function on(id) {
5 | const e = 'swtched on ';
6 | console.log(e + id);
7 | lastid = id;
8 | }
9 |
10 | export default function toggle(id) {
11 | const e = 'toggled ';
12 | console.log(e + id);
13 | lastid = id;
14 | }
15 |
16 | export let lastid = 0;
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "titanic-icons",
3 | "version": "1.2.0",
4 | "description": "A pack of animated icons",
5 | "main": "dist/index.html",
6 | "dependencies": {
7 | "bodymovin": "^4.5.9"
8 | },
9 | "devDependencies": {
10 | "del": "^2.2.2",
11 | "gulp": "^3.9.1",
12 | "gulp-concat": "^2.6.1",
13 | "gulp-inject": "^4.2.0",
14 | "gulp-rename": "^1.2.2",
15 | "gulp-sourcemaps": "^2.4.1",
16 | "gulp-uglify": "^2.1.0",
17 | "run-sequence": "^1.2.2"
18 | },
19 | "scripts": {
20 | "test": "echo \"Error: no test specified\" && exit 1"
21 | },
22 | "repository": {
23 | "type": "git",
24 | "url": "git+https://github.com/icons8/titanic.git"
25 | },
26 | "author": "Icons8",
27 | "license": "ISC",
28 | "bugs": {
29 | "url": "https://github.com/icons8/titanic/issues"
30 | },
31 | "homepage": "https://github.com/icons8/titanic#readme"
32 | }
33 |
--------------------------------------------------------------------------------
/demo/styles/demo.css:
--------------------------------------------------------------------------------
1 | .titanic {
2 | width: 100px;
3 | height: 100px;
4 | display: inline-block;
5 | }
6 |
7 | /*Defines icon colors*/
8 | .titanic path {
9 | fill: #249795;
10 | stroke: #249795;
11 | }
12 |
13 | /*Decoration for the presentation only, remove it when using on your own*/
14 |
15 | body {
16 | display: table;
17 | height: 100%;
18 | font-family: 'Helvetica Neue', 'Helvetica', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
19 | }
20 |
21 | .block {
22 | display: table-cell;
23 | text-align: center;
24 | vertical-align: middle;
25 | padding: 50px;
26 | }
27 |
28 | button, input, label {
29 | min-height: 30px;
30 | font-size: 18px;
31 | padding: 8px;
32 | }
33 |
34 | button {
35 | min-width: 80px;
36 | background-color: #FF4D4D;
37 | border-radius: 3px;
38 | color: white;
39 | border: none;
40 | margin-bottom: 50px;
41 | }
42 |
43 | input {
44 | width: 150px;
45 | }
46 |
47 | .titanic {
48 | padding:20px;
49 | }
50 |
51 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Added manually
2 | dist/maps
3 | .idea
4 |
5 | # Created by https://www.gitignore.io/api/node
6 |
7 | ### Node ###
8 | # Logs
9 | logs
10 | *.log
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 |
15 | # Runtime data
16 | pids
17 | *.pid
18 | *.seed
19 | *.pid.lock
20 |
21 | # Directory for instrumented libs generated by jscoverage/JSCover
22 | lib-cov
23 |
24 | # Coverage directory used by tools like istanbul
25 | coverage
26 |
27 | # nyc test coverage
28 | .nyc_output
29 |
30 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
31 | .grunt
32 |
33 | # Bower dependency directory (https://bower.io/)
34 | bower_components
35 |
36 | # node-waf configuration
37 | .lock-wscript
38 |
39 | # Compiled binary addons (http://nodejs.org/api/addons.html)
40 | build/Release
41 |
42 | # Dependency directories
43 | node_modules/
44 | jspm_packages/
45 |
46 | # Typescript v1 declaration files
47 | typings/
48 |
49 | # Optional npm cache directory
50 | .npm
51 |
52 | # Optional eslint cache
53 | .eslintcache
54 |
55 | # Optional REPL history
56 | .node_repl_history
57 |
58 | # Output of 'npm pack'
59 | *.tgz
60 |
61 | # Yarn Integrity file
62 | .yarn-integrity
63 |
64 | # dotenv environment variables file
65 | .env
66 |
67 |
68 | # End of https://www.gitignore.io/api/node
69 | .vscode/launch.json
70 |
--------------------------------------------------------------------------------
/visual-studio-code-snippet.json:
--------------------------------------------------------------------------------
1 |
2 | "Animated icon": {
3 | "prefix": "anic",
4 | "body": [ "",
5 | "",
6 | "",
7 | "",
42 | ""]
43 | }
44 |
45 | }
--------------------------------------------------------------------------------
/dist/js/titanic.min.js:
--------------------------------------------------------------------------------
1 | var Titanic;!function(){function t(){this.anim.playSegments([c,f],!0),this.state=1}function n(){this.anim.playSegments([f+1,r],!0),this.state=0}function i(){this.anim.playSegments([c,r],!0),this.state=0}function e(){0===this.state?this.on():this.off()}function o(t,n){var i=t.baseURL;document.addEventListener("DOMContentLoaded",function(){for(var e=document.getElementsByClassName("titanic"),o=e.length;o;){var a=e[--o],s=a.className.match(/titanic-([^\s]+)/);s&&s.length&&s[1]&&d.unshift(new l(a,s[1],t,i))}h=!0,"function"==typeof n&&n()})}function a(t){if(h)for(var n=d.length-1;n>=0;n--)if(d[n].titanicToken===t)return d[n]}function s(t,n){var i=a(t);i&&"function"==typeof i[n]&&i[n]()}var c=0,f=13,r=27,l=function(o,a,s,c){var f=this;f.titanicToken=a,f.state=0,f.anim=bodymovin.loadAnimation({container:o,renderer:"svg",loop:!1,autoplay:!1,path:c+a+".json"}),f.on=t.bind(f),f.off=n.bind(f),f.play=i.bind(f),f.toggle=e.bind(f),s.click&&o.addEventListener("click",f.toggle),s.hover&&(o.addEventListener("pointerenter",f.toggle),o.addEventListener("pointerleave",f.toggle))},d=[],h=!1;Titanic=function(t){this.options={baseURL:t.baseURL||"https://cdn.rawgit.com/icons8/titanic/master/dist/icons/",hover:void 0===t.hover||t.hover,click:void 0!==t.click&&t.click};var n=this;o(this.options,function(){n.items=d,n.isInitialized=function(){return h},n.on=function(t){s(t,"on")},n.off=function(t){s(t,"off")},n.play=function(t){s(t,"play")}})}}();
2 | //# sourceMappingURL=../maps/titanic.min.js.map
3 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var del = require('del');
3 | var inject = require('gulp-inject');
4 | var runSequence = require('run-sequence');
5 | var concat = require('gulp-concat');
6 | var uglify = require('gulp-uglify');
7 | var rename = require("gulp-rename");
8 | var sourceMaps = require('gulp-sourcemaps');
9 |
10 | gulp.task('default', function (callback) {
11 | runSequence('build',
12 | 'watch',
13 | callback);
14 | });
15 |
16 | gulp.task('vendor', function () {
17 | return gulp.src(['./node_modules/bodymovin/build/player/bodymovin.min.js'])
18 | .pipe(gulp.dest('dist/vendor/'));
19 | });
20 |
21 | gulp.task('js', function () {
22 | return gulp.src(['./src/js/titanic.js'])
23 | .pipe(sourceMaps.init())
24 | .pipe(concat('titanic.js'))
25 | .pipe(uglify())
26 | .pipe(rename({
27 | suffix: '.min'
28 | }))
29 | .pipe(sourceMaps.write('../maps'))
30 | .pipe(gulp.dest('dist/js/'));
31 | });
32 |
33 | gulp.task('images', function () {
34 | return gulp.src('src/icons/*')
35 | .pipe(gulp.dest('dist/icons/'));
36 | });
37 |
38 | // Cleans all /dist
39 | gulp.task('clean', function () {
40 | console.log('Cleaning...');
41 | return del('dist/*');
42 | });
43 |
44 | gulp.task('build', function (callback) {
45 | runSequence('clean', ['images', 'vendor', 'js'],
46 | callback);
47 | });
48 |
49 | gulp.task('watch', function () {
50 | gulp.watch('src/js/*.js', ['js']);
51 | gulp.watch('src/images/*', ['images']);
52 | gulp.watch('gulpfile.js', ['build']);
53 | });
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |