{"id":21034468,"url":"https://github.com/animify/minicons","last_synced_at":"2025-05-15T13:32:42.751Z","repository":{"id":26262116,"uuid":"107788199","full_name":"animify/Minicons","owner":"animify","description":"💅 Aesthetic open-source SVG icons based on a 24x24 grid.","archived":false,"fork":false,"pushed_at":"2022-11-15T22:40:20.000Z","size":501,"stargazers_count":14,"open_issues_count":6,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-12T21:48:35.409Z","etag":null,"topics":["icons","iconset","javascript","svg"],"latest_commit_sha":null,"homepage":"https://minicons.netlify.com/","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/animify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-21T14:42:53.000Z","updated_at":"2021-04-28T13:55:25.000Z","dependencies_parsed_at":"2023-01-14T04:17:55.690Z","dependency_job_id":null,"html_url":"https://github.com/animify/Minicons","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animify%2FMinicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animify%2FMinicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animify%2FMinicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animify%2FMinicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/animify","download_url":"https://codeload.github.com/animify/Minicons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254349571,"owners_count":22056373,"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":["icons","iconset","javascript","svg"],"created_at":"2024-11-19T13:07:15.460Z","updated_at":"2025-05-15T13:32:42.739Z","avatar_url":"https://github.com/animify.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Minicons\n\n[![Build Status](https://travis-ci.org/animify/Minicons.svg?branch=build_br)](https://travis-ci.org/animify/Minicons)\n[![Maintainability](https://api.codeclimate.com/v1/badges/18c67260237745b56cbe/maintainability)](https://codeclimate.com/github/animify/Minicons/maintainability)\n\n## About Minicons\n\nMinicons is an open-source SVG icon set drafted on an 24x24 sized grid aimed at unifying icon design across a website. Currently the first release is covering several categories of icons (86 total).\n\n[View available icons](https://minicons.netlify.app)\n\n## Table of contents\n\n1. [Features](#features)\n2. [Getting Minicons](#getting-minicons)\n   1. [CDN](#cdn)\n   2. [ZIP](#download-the-zip)\n   3. [NPM](#using-npm)\n3. [Quick start](#download-the-zip)\n4. [API](#api)\n   1. [Properties](#properties)\n      - [`minicons.icons`](#miniconsicons)\n      - [`minicons.config`](#miniconsconfig)\n   2. [Methods](#methods)\n      - [`minicons.find()`](#miniconsfindname)\n      - [`minicons.create()`](#miniconscreatename-props)\n      - [`minicons.swap()`](#miniconsswap)\n5. [Contributing guidelines](#building)\n5. [License](#license)\n\n\n## Features\n\n* Dead simple to set up\n* Icon swap when an element is dynamically added\n* Extensive, straight forward icon object API\n* Over 80+ icons\n* Uniform design\n* Easily configurable\n\n## Getting Minicons\n\n### CDN\n\nYou can directly import minicons.js from the CDN:\n\n```\nhttps://unpkg.com/minicons@latest/dist/minicons.js\n```\n\nCDN links are also supported for older specified versions:\n\n```\nhttps://unpkg.com/minicons@_VERSION_/dist/minicons.js\n```\n\n### Download the ZIP\n\n[Download](https://github.com/animify/Minicons/releases/latest) the latest release.\n\n### Using NPM\n\nInstall Minicons using CDN\n\n```\nnpm i minicons -S\n```\n\nThis will create all dist files in the Minicons package folder in your roots' node modules.\n\n```\n├── dist/\n\n      ├── icons/\n\n      ├── minicons.js\n      \n      ├── minicons.min.js\n\n      └── minicons.json\n```\n\n## Quick start\n\nGet up and running within minutes inside your browser.\n\n#### 1. Include\n\nInclude the CDN or the path to minicons.js at the end of your closing `\u003cbody/\u003e` tag in your markup:\n\n```html\n\u003cscript src=https://unpkg.com/minicons@latest/dist/minicons.js\"\u003e\u003c/script\u003e\n\u003c!-- or use a relative path --\u003e\n\u003cscript src=\"path/to/dist/minicons.min.js\"\u003e\u003c/script\u003e\n```\n\n#### 2. Add an icon\n\nNow it's time to add an icon. Just create a tag with `data-minicon` and the name:\n\n```html\n\u003ci data-minicon=\"chevron-right\"/\u003e\n```\n\n#### 3. Make the swap\n\nTo display the Minicon we do to the swap:\n\n```javascript\nminicons.swap();\n```\nAll icons added dynamically will be swapped _automagically_ for you. 😎\n\n## API\n\n### `minicons`\n\nThe `minicons` object is exposed upon including/importing the Minicons package into your ecosystem.\n\n### Properties\n\n#### `minicons.icons`\n\nContains an array of data about every single icon.\n\n\n*Returns*: An array of icon objects\n\n| Property      | Type   | Description             |\n| ------------- | ------ | ----------------------- |\n| `aliases`     | array  | List of alias names     |\n| `content`     | string | SVG string of the icon  |\n| `name   `     | string | The name of the icon    |\n\n#### `minicons.config`\n\nThe config object Minicons was produced from.\n\n*Returns*: Config object\n\n| Property                | Type   | Description                                 |\n| ----------------------- | ------ | ------------------------------------------- |\n| `name`                  | string | The name of the config                      |\n| `props`                 | object | The properties that will apply to the svg   |\n| `props.class`           | string | Additional class to be added to the icon    |\n| `props.fill`            | string | Fill to be added                            |\n| `props.height`          | number | Height of the icon                          |\n| `props.stroke`          | string | Stroke color of the icon                    |\n| `props.stroke-linecap`  | string | Linecap used to brush over                  |\n| `props.stroke-linejoin` | string | How the lines will be joined together       |\n| `props.stroke-width`    | number | Width of the stroke applied                 |\n| `props.viewBox`         | string | Viewbox of the SVG icon container           |\n| `props.width`           | number | Width of the icon                           |\n| `props.xmlns`           | string | SVG namespace that is used                  |\n\n### Methods\n\n#### `minicons.find(name)`\n\nFinds an icon by name or alias and returns the _icon object_.\n\n| Parameter   | Type   | Description                                   |\n| ----------- | ------ | --------------------------------------------- |\n| `name`      | string | The name or alias of an icon e.g `add-circle` |\n\n##### Usage\n\n```JS\nminicons.find('plus')\n// {name: \"add-circle\", content: \"\u003ccircle cx=\"12\" cy=\"12\" r=\"10\" data-name=\"--Circle…\u003e\u003cline x1=\"12\" x2=\"12\" y1=\"15.5\" y2=\"8.5\"\u003e\u003c/line\u003e\", aliases: Array(1)}\n```\n\n#### `minicons.create(name, props)`\n\nCreates and returns an SVG icon by passing name and prop parameters.\n\n*Returns*: SVG element.\n\n| Parameter   | Type   | Description                                   |\n| ----------- | ------ | --------------------------------------------- |\n| `name`      | string | The name or alias of an icon e.g `add-circle` |\n| `props`     | object | Objects of props that will be translated to attributes on the SVG element. e.g `{ stroke: 'red' }` will be converted to `stroke=\"red\"` |\n\n##### Usage\n\n```JS\nminicons.find('plus')\n// {name: \"add-circle\", content: \"\u003ccircle cx=\"12\" cy=\"12\" r=\"10\" data-name=\"--Circle…\u003e\u003cline x1=\"12\" x2=\"12\" y1=\"15.5\" y2=\"8.5\"\u003e\u003c/line\u003e\", aliases: Array(1)}\n```\n\n#### `minicons.swap()`\n\nSwaps elements in the DOM with the `data-minicon` attribute into an SVG minicon. Only works in a browser environment.\n\n##### Usage\n\n```HTML\n\u003ci data-minicon=\"plus\"\u003e\u003c/i\u003e\n\n\u003cscript\u003e\n      minicons.swap();\n\u003c/script\u003e\n```\n\n## Building\n\n#### Clean, optimize and parse SVG icon files in the icons directory\n```shell\n$ ./build.sh icons\n```\n\n#### ...or to additionally package Minicons and run tests\n```shell\n$ ./build.sh\n```\n\n## Contributing guidelines\n\nIf you wish to contribute to the Minicons project please check out the [contributing guidelines](CODE_OF_CONDUCT.md).\n\n## License\n\nMinicons is licensed under the [MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanimify%2Fminicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanimify%2Fminicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanimify%2Fminicons/lists"}