{"id":17289144,"url":"https://github.com/dipu-bd/vue-skycons","last_synced_at":"2025-04-14T11:15:31.582Z","repository":{"id":40562358,"uuid":"280299258","full_name":"dipu-bd/vue-skycons","owner":"dipu-bd","description":"A set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag.","archived":false,"fork":false,"pushed_at":"2024-10-14T13:25:12.000Z","size":3210,"stargazers_count":11,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T00:24:15.606Z","etag":null,"topics":["animation","icons","skycons","vue","weather"],"latest_commit_sha":null,"homepage":"https://dipu-bd.github.io/vue-skycons","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dipu-bd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-17T01:44:12.000Z","updated_at":"2024-10-14T13:24:09.000Z","dependencies_parsed_at":"2024-01-30T13:02:15.670Z","dependency_job_id":"46a67833-8ed4-42cb-85cb-4c683765135c","html_url":"https://github.com/dipu-bd/vue-skycons","commit_stats":{"total_commits":168,"total_committers":9,"mean_commits":"18.666666666666668","dds":0.5476190476190477,"last_synced_commit":"56a0dc63d0782848a449b2606bfca987c3ffe6b8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dipu-bd%2Fvue-skycons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dipu-bd%2Fvue-skycons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dipu-bd%2Fvue-skycons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dipu-bd%2Fvue-skycons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dipu-bd","download_url":"https://codeload.github.com/dipu-bd/vue-skycons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248557847,"owners_count":21124168,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","icons","skycons","vue","weather"],"created_at":"2024-10-15T10:33:46.512Z","updated_at":"2025-04-14T11:15:31.555Z","avatar_url":"https://github.com/dipu-bd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Skycons\n\n[![npm](https://img.shields.io/npm/v/vue-skycons)](http://npmjs.com/package/vue-skycons)\n[![npm download per month](https://img.shields.io/npm/dm/vue-skycons)](http://npmjs.com/package/vue-skycons)\n[![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/vue-skycons?color=red)](https://raw.githubusercontent.com/dipu-bd/vue-skycons/master/package.json)\n[![NPM license](https://img.shields.io/npm/l/vue-skycons?color=blueviolet)](https://raw.githubusercontent.com/dipu-bd/vue-skycons/master/LICENSE)\n\nThis was inspired by [Skycons](https://github.com/darkskyapp/skycons) -- a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag. They're easy to use, and pretty lightweight, so they shouldn't rain on your parade.\n\n![icons.gif](https://raw.githubusercontent.com/dipu-bd/vue-skycons/master/images/icons.gif)\n\n## Installation\n\n### NPM\n\n```sh\nnpm install --save vue-skycons\n```\n\n### YARN\n\n```sh\nyarn add vue-skycons\n```\n\n## Examples\n\n### Register Component\n\n```js\nimport Vue from \"vue\";\nimport Skycon from \"vue-skycons\";\n\nVue.component(\"skycon\", Skycon);\n```\n\n### Using Component\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003c!-- all icons --\u003e\n    \u003cskycon condition=\"clear-day\" /\u003e\n    \u003cskycon condition=\"clear-night\" /\u003e\n    \u003cskycon condition=\"partly-cloudy-day\" /\u003e\n    \u003cskycon condition=\"partly-cloudy-night\" /\u003e\n    \u003cskycon condition=\"cloudy\" /\u003e\n    \u003cskycon condition=\"rain\" /\u003e\n    \u003cskycon condition=\"sleet\" /\u003e\n    \u003cskycon condition=\"snow\" /\u003e\n    \u003cskycon condition=\"wind\" /\u003e\n    \u003cskycon condition=\"fog\" /\u003e\n\n    \u003c!-- all attributes --\u003e\n    \u003cskycon condition=\"rain\" size=\"128\" color=\"orangered\" paused @load=\"console.log\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Skycon from \"vue-skycons\";\n\nexport default {\n  components: {\n    Skycon\n  }\n}\n```\n\n### Available props\n\n```js\n// Weather condition\ncondition: {\n  type: String,\n  required: true,\n},\n\n// Icon size\nsize: {\n  type: [Number, String],\n  default: 64,\n},\n\n// Icon color\ncolor: {\n  type: String,\n  default: \"black\",\n},\n\n// Start with paused animation\npaused: {\n  type: Boolean,\n  default: false,\n},\n\n// The animation speed\nspeed: {\n  type: [Number, String],\n  default: 1\n}\n```\n\n### Event example\n\n```vue\n\u003ctemplate\u003e\n  \u003cskycon condition=\"snow\" size=\"128\" paused @load=\"onLoad\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    onLoad(player) {\n      console.log(\"loaded\");\n      setInterval(() =\u003e {\n        if (player.paused) {\n          player.play();\n        } else {\n          player.pause();\n        }\n      }, 1000);\n    },\n  },\n};\n\u003c/script\u003e\n```\n\n### Animation Speed\n\nThe `speed` attributes is a decimal number to control the animation speed. It is a multiplyer to the original speed. `1` means the normal speed. `0.5` means half the normal speed. `2` means twice as fast as the normal speed.\n\n```vue\n\u003ctemplate\u003e\n  \u003cskycon condition=\"wind\" size=\"128\" speed=\"1\" /\u003e\n  \u003cskycon condition=\"wind\" size=\"128\" speed=\"3\" /\u003e\n  \u003cskycon condition=\"wind\" size=\"128\" speed=\"0.5\" /\u003e\n\u003c/template\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdipu-bd%2Fvue-skycons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdipu-bd%2Fvue-skycons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdipu-bd%2Fvue-skycons/lists"}