klarr-agency / circum-icons

Circum is a open source icon library following Google Material Design principles. Every icon was made using a 24x24 grid.

Circum Icons

This library was created following Google material and IBM Carbon design principles. Our main goal was to keep a certain consistency throughtout all the set and ensure that each icon has the same visual weight.

Available for these frameworks 👉 React, Vue and Svelte

Documentation

Français Español

Installation

Install with npm

React

  npm i -D @klarr-agency/circum-icons-react

Vue.js

  npm i -D @klarr-agency/circum-icons-vue

Svelte

  npm i -D @klarr-agency/circum-icons-svelte

Usage/Examples

// Add one of these 3 lines below corresponding to your framework
import CircumIcon from "@klarr-agency/circum-icons-react"; // React
import CircumIcon from "@klarr-agency/circum-icons-vue"; // Vue
import CircumIcon from "@klarr-agency/circum-icons-svelte"; // Svelte



<CircumIcon name="calendar"/>
// You can change color and size
<CircumIcon name="calendar" color="#000" size="48px">

Features

Array Builder

You can created an array directly on our website. Don't need to go back and forth to copy each icon name.
In this example, you can see how to build a side navigation 🏗👇 You can find this example here Circum-Icons-SvelteKit-Demo

Create Properties

Now you can save more time by adding new properties in your array. Remember you need to be in object mode
if you want to see the properties section. 😉😎🤓

Icons

You can see the list of available icons on circumicons.com

Roadmap

• Property manager (Possibility to add new properties in the Array Builder) 🏗
• Add keywords to search terms 🔎
• Download icons in color of choice 🎨
• Resize icons on the fly 🚀
• Clipboard options in single selection type (Component tag vs SVG).📌
• Animate version 🎬
• Duo tone & solid style for all 285 icons 😻
• Premium access // Array Builder for 809 icons, Component Builder and more. 💸
• Add icons to Elementor for WordPress 📰

Where to find us! 👀

• Reddit
• Penpot Libraries
• Toools Design
• Devresourc.es
• Gumroad

Authors

• @klarr-agency

circum-icons's Issues

Publish circum-icon-core on npm, export { iconList }

I want to use these icons in Inferno.
I need to be able to import iconList in my Inferno wrapper.
To do so, I need a package that exports the iconList const. Right now, the only solution is to clone your repository, manually copy the iconList.js file in my source directory.
It would be better if you could publish a package that exports { iconList } instead. This is to help third parties to include your package as a whole (including a copy of the license, links to source etc) in their distribution.

I would go one step further and refactor your packages to have circum-icon-core as dependency and import { iconList } from circum-icon-core

Temporarily, the manual copy/pasting approach is used for this package.

Monorepo structure

I've seen that you maintain multiple repositories for each library/framework. It's not necessary to make changes on each repo when you make updates/changes. This problem could be easily solved by using Lerna.

Project structure would be:

-- packages
  -- circum-icons-core
  -- circum-icons-svelte
  -- circum-icons-react
  -- circum-icons-vue

Lerna would deal publishing packages to proper npm registries.

---

Another idea:

Instead of creating and editing displayIcons.js file manually from svg files, you could write a build script that generates displayIcons.js file by extracting both names and direct inner html of svg files. So, it would be easy to add new icons just by adding files to svg folder and build circum-icons-core package.

Project description typo

Describe the bug
In the Github "About" section, "Every icons" should read "Every icon".

To Reproduce
Steps to reproduce the behavior:

1. Click "Code" above
2. Look on the right

Additional context
Will require a repository admin to change via Github's web interface (gear icon next to "About")

Translate README.md to spanish

• Fork this repo
• Create a new file README-ES.md
• Translate file to spanish
• Done!

If you have ideas on how we can improve this project feel free to share it in the discussions section :)

Thank you for your contribution!

Issue: Icon request

Please verify these criteria before summiting your issue

• [ x ] I look through all icons at circumicons.com to see if there is no icon with the same use case.
• [ x ] Explicit content is not allowed

Describe the icon you'd like
I want to add more icons like tech companies icons, basic feature icons, monument icons, currency icons, and many more.

Additional context
here I am adding a screenshot of my hand-drawing icon idea so you can make a better understanding.

Keyword
Google, Microsoft, Apple, Amazon, Pyramid, Eiffel Tower, Statue of Unity, Statue of Liberty, Rupee, Pound, Euro, Yuan, Flag, Taj Mahal, Football, Golf, Earth, Torch, Screenshot, Lock Orientation, Scanner, Reading mode, Cast, Vibrate, Key...

Npm package type definitions:

Is your feature request related to a problem? Please describe.
Using the packages in typescript can be troublesome since the package doesn't include a type definition.

Describe the solution you'd like
I'd like to add type definitions to all the packages

Describe alternatives you've considered
The types could also be added to the definitely typed repo, but in opinion having the type definitions in the main package is easier and doesn't require a third party

Additional context
When I get the time I will create a PR with functional type definitions

Bundling of @klarr-agency/circum-icons-react is not right.

A few bundle issues here result in production and development errors.

1. You ship React in your bundle, causes mismatching versions error.
2. There is no Barrel export so Webpack based frameworks will experience a development slowdown trying to serialize 400kb of modules.
3. The bundle is un-treeshakeable due to it shipping all icons as an array and serializes them in runtime.
4. Using this library results in 77kb added to bundle regardless of bundler and serializer

To resolve:

1. Add React as a peer dependency so Rollup skips bundling it.
2. Consider running a generate script before building to generate a React component for each SVG as a separate file.
3. Add a barrel export file for all the generated components
4. Run SWC or any other transpiler over the bundle to produce ESM and CJS modules.

I am happy to fix these issues and submit a PR if you'd like.