diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md index 27f4a36..203471c 100644 --- a/CONTRIBUTION.md +++ b/CONTRIBUTION.md @@ -1,5 +1,4 @@ # 📒 Contribution guidelines -Contributions and discussions are welcomed to this project! ## Code of conduct @@ -13,12 +12,15 @@ I believe that healthy debate and disagreement are essential to a healthy projec - Be constructive. - Be responsible. +Not following the contributions guidelines may result in issues or PR closing or deletion, the ban of the user's account or reporting to Github staff. + ## TOC Learn about: 1. [Open a topic to discuss](#-discussions) -2. [Open an issue about a bug, improvement or to suggest icons](#️-i-would-like-to-report-a-bug-or-an-issue) -3. [Open a PR to patch or contribute to the project]() +2. [Open an issue about a bug, improvement or to suggest icons](#-issues) +3. [Open a PR to patch or contribute to the project](#-code-contributions) +4. [Icon design guidelines](#-icon-design-guidelines) ## 💬 Discussions @@ -43,19 +45,20 @@ Specific rules applies, and not following them may result in the closing of the * Issue must be sufficiently described, clear and not misleading. * Issue may be flagged as _duplicate_ if the topic is already discussed on another issue. To avoid your issue being closed early, please search for duplicated before opening one and comment or upvote it instead. -## 🪄 Code contribution +## 🪄 Code contributions -> Code contribution can take form of new icons in SVG or changes to existing icons in the goal to improve them. +> Code contribution can take form of new icons in SVG or changes to existing icons in the goal to improve them. The workflow is the classic Github *Fork* → *Commit* → *Push* → *Pull Request*. -Pull Requests must follow the rules below: -- Contributions must be related to an issue. Please create one before opening a PR. -- Code related to icons must follow icons design guidelines +Pull Requests should bind to the Github's best practices. They must follow the rules below: +- It must be related to an issue. Please create one before opening a PR. +- It must have the **Conventional Commit** principles in commit and PR names. I.e.: *fix(#33): Remove duplicate stroke on the main circle* +- Changes related to icons must follow icons design guidelines -## Icon design guideline +## 🎨 Icon design guidelines -- Icons must be in the **style and spirit of the original work** from Marc. +- Icons must be in the **style and spirit of the original work** from Marc James. - Icons must be in **SVG**. - Icons must be designed to be **legible in any size from 16×16px to 64×64px**. It must have the right balance between too much details and too little. -- Icon improvement based on existing icons must be as close as possible to the original design. +- Icon improvement based on existing icons must be as close as possible to the original design, especially at 16×16px. - Icon must render without visual artefact in today's broswer such as WebKit, Blink, Gecko. diff --git a/README.md b/README.md index c112f07..9ff9e85 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,38 @@ -![Cover illustration](./public/cover.png) + -# FamFamFam Silk as SVG -> The iconic iconset of the 2010’s era from Marc James, remade in SVG and Figma kit for today’s needs. +# FamFamFam Silk as SVG & Figma Kit +> The iconic iconset of the 2010’s era from Mark James, remade in SVG and Figma kit for today’s needs. ## 🚀 Getting started -This work contains icons in SVG ready to use as you need it. Feel free to: +### Get the icons + +This work contains 1000+ icons in SVG ready to use as you need it. Feel free to: * Clone or fork the repository. * Use the [Figma UI Kit](https://)! * Or simply download files from the [icons](./icons/) folder. -### Mix and Match icons to create new ones. +![All available icons](./public/available-icons.png) -(this section is for v2) -You may not find the perfect match from the 1000 icons here, so here come the [decorators](./decorators/) and [parts](./parts/) folders. +### Mix and Match icons to create new ones -- Decorators are bullet-like icons that you can place above an existing icon to give it more meaning. - `image of a composition` -- Some icons have parts available to allow you to customize or change element of an icon to your need. - `image of parts and variations arout them (using the user icon as example)` +You may not find the perfect icon, so [decorators](./decorators/), [parts](./parts/) and [variants](/variants) (in their respective folders) come to help: + +- Decorators are bullet-like icons that you can place on top of an existing icon to give it more meaning: + ![Pick an icon, add a decorator on top, and voilà! you have a new icon!](./public/compositor.svg) +- Some icons have parts to allow you to customize or change element to your need: + ![Swap parts to compose an icon to your liking](./public/repartitor.svg) +- Variants contains slight aestetics changes of an icon: + ![Switch variants of an icon](./public/variator.svg) ## Contribute 🧑‍🎨 Contributions are welcomed to this project! Want to contribute?, pick the righ section below: -**🖐️ I would like to report a bug or an issue!** -The issue section is the right place for you to describe your problem. Please take time to review existing issue to avoir duplicates. +**🖐️ I would like to report a bug or suggest something!** +The issue section is the right place for you to describe your problem. Please take time to review existing issues to avoir duplicates. **🩹 I have fixed this icon, how can I give it back?** *Fork* → *Patch* → *Push* → *Pull Request*. Please read the Contribution guideline or your contribution may not be approved. @@ -37,5 +42,46 @@ Sure! Take note of the Contribution guideline and *Fork* → *Create* → *Push* ## License -I have not settled on the right licence for this product, so as for now I'll follow Mark James' Create Commons Attribution. He used 2.5, but I picked version 4. -I would like a more protective licence, one that could permit company and users to pick stuff here and use them in commercial products and marketing material, but prevent "stealing" stuff or changing ownership over minimal visual changes. \ No newline at end of file +This project is licensed under the [**Creative Commons BY 4**](https://creativecommons.org/licenses/by/4.0/) license. In a nutshell: + +### You are free to: +- **Share** — copy and redistribute the material in any medium or format for any purpose, even commercially. +- **Adapt** — remix, transform, and build upon the material for any purpose, even commercially. +- The licensor cannot revoke these freedoms as long as you follow the license terms. + +### Under the following terms: +- **Attribution** — You must give [appropriate credit](https://creativecommons.org/licenses/by/4.0/#ref-appropriate-credit), provide a link to the [license](./LICENSE), and [indicate if changes were made](https://creativecommons.org/licenses/by/4.0/#ref-indicate-changes). You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use. +- **No additional restrictions** — You may not apply legal terms or [technological measures](https://creativecommons.org/licenses/by/4.0/#ref-technological-measures) that legally restrict others from doing anything the license permits. + +### Notices +You do not have to comply with the license for elements of the material in the public domain or where your use is permitted by an applicable [exception or limitation](https://creativecommons.org/licenses/by/4.0/#ref-exception-or-limitation). + +No warranties are given. The license may not give you all of the permissions necessary for your intended use. For example, other rights such as [publicity, privacy, or moral rights](https://creativecommons.org/licenses/by/4.0/#ref-publicity-privacy-or-moral-rights) may limit how you use the material. + +## Acknowlegements + +#### Credits + + - © Mark James + - © Simon Priet + +The Original *FamFamFam Silk* icon pack ([github](https://github.com/markjames/famfamfam-silk-icons) • [website](http://www.famfamfam.com/lab/icons/silk/)) remains the property of Mark James. Please have my thanks and salute for your great work. + +#### Fonts used in some icons +- [Fira Mono](https://github.com/mozilla/Fira) +- [Fira Sans](https://github.com/mozilla/Fira) +- [Fira Sans Condensed](https://github.com/mozilla/Fira) +- [Love Ya Like a Sister](https://fonts.google.com/specimen/Love+Ya+Like+A+Sister) by [Kimberly Geswein](https://kimberlygeswein.com/) +- [Segoe UI](https://learn.microsoft.com/en-us/typography/font-list/segoe-ui) (for Office logos) +- [Hind](https://fonts.google.com/specimen/Hind) by the [Indian Type Foundry](https://www.indiantypefoundry.com/) + +#### Softwares +- [Gitea](https://about.gitea.com/), an awesome self-hosted github alternative +- [Figma](https://www.figma.com) +- [Firefox](https://www.mozilla.org/firefox/new/) +- [VSCodium](https://vscodium.com/), a community-driven, freely-licensed binary distribution of Microsoft’s editor VS Code + +#### About me + +Hi I'm Simon. Computer enthousiast, I have recently switch to become a Product.UX.UI Designer, and used to be a Quality Engineer. I love to create stuff and make them available to all. +[linkedin](https://www.linkedin.com/in/simonpriet/) • [behance](https://www.behance.net/SimonPistache#) • [dribbble](https://dribbble.com/SimonPistache) • [github](https://github.com/SimonPistache) \ No newline at end of file diff --git a/public/available-icons.png b/public/available-icons.png new file mode 100644 index 0000000..06b713d Binary files /dev/null and b/public/available-icons.png differ diff --git a/public/compositor.svg b/public/compositor.svg new file mode 100644 index 0000000..7d6c53b --- /dev/null +++ b/public/compositor.svg @@ -0,0 +1,228 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/cover.png b/public/cover.png index 32bea4b..bc07851 100644 Binary files a/public/cover.png and b/public/cover.png differ diff --git a/public/github-cover.png b/public/github-cover.png new file mode 100644 index 0000000..5cdcb46 Binary files /dev/null and b/public/github-cover.png differ diff --git a/public/repartitor.svg b/public/repartitor.svg new file mode 100644 index 0000000..1f4c962 --- /dev/null +++ b/public/repartitor.svg @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/variator.svg b/public/variator.svg new file mode 100644 index 0000000..3a7d581 --- /dev/null +++ b/public/variator.svg @@ -0,0 +1,193 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +