{"id":16489318,"url":"https://github.com/unimonkiez/icon-maker-loader","last_synced_at":"2025-07-20T12:03:39.833Z","repository":{"id":82443309,"uuid":"68406942","full_name":"unimonkiez/icon-maker-loader","owner":"unimonkiez","description":"Webpack loader to use icon font, easiest solution!","archived":false,"fork":false,"pushed_at":"2017-03-23T15:59:41.000Z","size":32,"stargazers_count":17,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T20:39:54.048Z","etag":null,"topics":["es6","font-files","html","icons","loader","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unimonkiez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2016-09-16T18:55:10.000Z","updated_at":"2025-01-22T23:24:50.000Z","dependencies_parsed_at":"2023-06-15T17:30:50.016Z","dependency_job_id":null,"html_url":"https://github.com/unimonkiez/icon-maker-loader","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unimonkiez%2Ficon-maker-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unimonkiez%2Ficon-maker-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unimonkiez%2Ficon-maker-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unimonkiez%2Ficon-maker-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unimonkiez","download_url":"https://codeload.github.com/unimonkiez/icon-maker-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245104460,"owners_count":20561377,"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":["es6","font-files","html","icons","loader","webpack"],"created_at":"2024-10-11T13:43:55.311Z","updated_at":"2025-03-23T12:34:22.975Z","avatar_url":"https://github.com/unimonkiez.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/unimonkiez/icon-maker-loader.svg?branch=master)](https://travis-ci.org/unimonkiez/icon-maker-loader)\n# Icon maker loader\n##### Webpack loader to load svgs to font files and return the css classes to use that icon.\n## Installation\n* `npm install icon-maker-loader`\n* if you dont have a css and fonts (eot,svg,ttf,woff) loader, you can use `css-loader` and `url-loader`.\n\n## Usage\n### webpack configuration\n```javascript\nconst path = require('path');\n\nmodule.exports = {\n  ...\n  module: {\n    loaders: [\n      {\n        test: /\\.svg$/,\n        loader: 'icon-maker',\n        include: path.join(__dirname, 'icons') // To avoid clash of svgs\n      }, {\n        test: /\\.css$/, // Have to configure css loader for the generated css\n        loader: 'style!css' // you can use `extract-text-webpack-plugin` instead of style-loader if it fits your needs\n      }, {\n        test: /\\.(woff|eot|ttf|svg)$/, // Have to configure fonts loaders for the generated fonts\n        loader: 'url',\n        exclude: path.join(__dirname, 'icons') // To avoid clash of svgs\n      }\n    ]\n  }\n};\n\n```\n### js example (react)\n```javascript\nimport React, { Component } from 'react';\nimport yinYan from './icons/yin-yan.svg'; // You get classes `default default-yin-yan`\n\nexport default MyComponent extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        Look at my icon!\n        \u003cspan className={yinYan} /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n### html example (requires [html-loader](https://github.com/webpack/html-loader))\n```html\n\u003cdiv\u003e\n  Look at my icon!\n  \u003cspan class=\"${require('./icons/yin-yan.svg')}\"\u003e\n  \u003c/span\u003e\n\u003c/div\u003e\n```\n## parameters (query params to the loader)\n* `fontFamily` - (default `icon-maker`), can split your icons to multiple font families (for instance, better loading for different pages of your application).\n* `files` - (default `eot,svg,ttf,woff`), can decide which font files will be generated.\n* `localCss` - (default `false`) - will generate css with [local scope](https://github.com/webpack/css-loader#local-scope) to be used with css-loader (you can also convert all of your classes to local using `css-loader?modules` and then this option is not needed).\n\n### Example of parameters\n`icon-maker?fontFamily=login\u0026files=eot,svg\u0026localCss`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funimonkiez%2Ficon-maker-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funimonkiez%2Ficon-maker-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funimonkiez%2Ficon-maker-loader/lists"}