Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aliosm/phlex-icons

General icons extension for Phlex. Includes more than 🎨 12,000 icons.
https://github.com/aliosm/phlex-icons

bootstrap-icons flag-icons heroicons lucide-icons phlex radix-ui-icons remixicons ruby-on-rails svg tabler-icons

Last synced: about 1 month ago
JSON representation

General icons extension for Phlex. Includes more than 🎨 12,000 icons.

Host: GitHub
URL: https://github.com/aliosm/phlex-icons
Owner: AliOsm
License: mit
Created: 2024-08-29T19:40:59.000Z (3 months ago)
Default Branch: main
Last Pushed: 2024-09-27T12:30:11.000Z (about 2 months ago)
Last Synced: 2024-10-10T04:42:49.896Z (about 1 month ago)
Topics: bootstrap-icons, flag-icons, heroicons, lucide-icons, phlex, radix-ui-icons, remixicons, ruby-on-rails, svg, tabler-icons
Language: Ruby
Homepage: https://phlex-icons.fun
Size: 7.27 MB
Stars: 24
Watchers: 1
Forks: 1
Open Issues: 3
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

[![Gem Version](https://badge.fury.io/rb/phlex-icons.svg)](https://badge.fury.io/rb/phlex-icons)
![rubocop](https://github.com/AliOsm/phlex-icons/actions/workflows/rubocop.yml/badge.svg?branch=main)
[![Ruby Style Guide](https://img.shields.io/badge/code_style-rubocop-brightgreen.svg)](https://github.com/rubocop/rubocop)
![Ruby Version](https://img.shields.io/badge/ruby_version->=_3.0.0-blue.svg)

# Phlex::Icons

General icons extension for [Phlex](https://phlex.fun). Includes more than 🎨 12,000 icons from:
- [Bootstrap Icons](https://icons.getbootstrap.com) (2,000+)
- [Flag Icons](https://flagicons.lipis.dev) (250+)
- [Heroicons](https://heroicons.com) (300+)
- [Lucide Icons](https://lucide.dev/icons) (1,500+)
- [RadixUI Icons](https://radix-ui.com/icons) (300+)
- [Remix Icons](https://remixicon.com) (2,800+)
- [Tabler Icons](https://tabler.io/icons) (4,800+)

And happy to extend to other icon packs!

If you don't want to add all icon packs to your application, you can add a specific icon pack by using one (or multiple) of the following gems:

- [phlex-icons-bootstrap](https://rubygems.org/gems/phlex-icons-bootstrap)
- [phlex-icons-flag](https://rubygems.org/gems/phlex-icons-flag)
- [phlex-icons-hero](https://rubygems.org/gems/phlex-icons-hero)
- [phlex-icons-lucide](https://rubygems.org/gems/phlex-icons-lucide)
- [phlex-icons-radix](https://rubygems.org/gems/phlex-icons-radix)
- [phlex-icons-remix](https://rubygems.org/gems/phlex-icons-remix)
- [phlex-icons-tabler](https://rubygems.org/gems/phlex-icons-tabler)

Thanks [nejdetkadir](https://github.com/nejdetkadir) for creating [Phlex::Heroicons](https://github.com/nejdetkadir/phlex-heroicons) as it was the base for this gem.

Other Phlex icon gems:
- [phlex-remixicon](https://github.com/danieldocki/phlex-remixicon)
- [phlex-lucide](https://github.com/akodkod/phlex-lucide)

## Installation

Install the gem and add it to the application's Gemfile by executing:

```bash
bundle add phlex-icons
```

If bundler is not being used to manage dependencies, install the gem by executing:

```bash
gem install phlex-icons
```

## Configuration

The gem provides global configuration options, and per icons pack configuration options.

### Global configuration

```ruby
Phlex::Icons.configure do |config|
config.default_classes = 'size-6'
end

# OR

Phlex::Icons.configuration.default_classes = 'size-6'
```

### Bootstrap Icons configuration

Nothing to configure for Bootstrap Icons.

### Flag Icons configuration

```ruby
Phlex::Icons::Flag.configure do |config|
config.default_variant = :square # or :rectangle
end

# OR

Phlex::Icons::Flag.configuration.default_variant = :square # or :rectangle
```

### Heroicons configuration

```ruby
Phlex::Icons::Hero.configure do |config|
config.default_variant = :solid # or :outline
end

# OR

Phlex::Icons::Hero.configuration.default_variant = :solid # or :outline
```

### Lucide Icons configuration

Nothing to configure for Lucide Icons.

### RadixUI Icons configuration

Nothing to configure for RadixUI Icons.

### Remix Icons configuration

Nothing to configure for Remix Icons.

### Tabler Icons configuration

```ruby
Phlex::Icons::Tabler.configure do |config|
config.default_variant = :outline # or :filled
end

# OR

Phlex::Icons::Tabler.configuration.default_variant = :outline # or :filled
```

## Usage

### With `Phlex::Kit`

```ruby
require 'phlex-icons' # No need to require the gem if you are using it in a Rails application.

class PhlexIcons < Phlex::HTML
include Phlex::Icons

def view_template
div do
Bootstrap::House(class: 'size-4')
Flag::Sa(variant: :rectangle, class: 'size-4')
Hero::Home(variant: :solid, class: 'size-4')
Lucide::House(class: 'size-4')
Radix::Home(class: 'size-4')
Remix::HomeLine(class: 'size-4')
Tabler::Home(variant: :filled, class: 'size-4')
end
end
end
```

### Without `Phlex::Kit`

```ruby
require 'phlex-icons' # No need to require the gem if you are using it in a Rails application.

class PhlexIcons < Phlex::HTML
def view_template
div do
render Phlex::Icons::Bootstrap::House.new(class: 'size-4')
render Phlex::Icons::Flag::Sa.new(variant: :rectangle, class: 'size-4')
render Phlex::Icons::Hero::Home.new(variant: :solid, class: 'size-4')
render Phlex::Icons::Lucide::House.new(class: 'size-4')
render Phlex::Icons::Radix::Home.new(class: 'size-4')
render Phlex::Icons::Remix::HomeLine.new(class: 'size-4')
render Phlex::Icons::Tabler::Home.new(variant: :filled, class: 'size-4')
end
end
end
```

### Specific icon pack(s)

Let's say you want to use only Heroicons and Flag Icons, you can use the following gems:
- [phlex-icons-flag](https://rubygems.org/gems/phlex-icons-flag)
- [phlex-icons-hero](https://rubygems.org/gems/phlex-icons-hero)

Then, in your application, you can use the icons like this:

```ruby
require 'phlex-icons-flag' # No need to require the gem if you are using it in a Rails application.
require 'phlex-icons-hero' # No need to require the gem if you are using it in a Rails application.

class PhlexIcons < Phlex::HTML
include Phlex::Icons # If you want to use Phlex::Kit.

def view_template
div do
# With Phlex::Kit.
Flag::Sa(variant: :rectangle, class: 'size-4')
Hero::Home(variant: :solid, class: 'size-4')

# Without Phlex::Kit.
render Phlex::Icons::Flag::Sa.new(variant: :rectangle, class: 'size-4')
render Phlex::Icons::Hero::Home.new(variant: :solid, class: 'size-4')
end
end
end
```

### Add custom icons to your Rails application

You can extend the gem in your Rails application to add new icons by creating a `phlex/icons/custom` directory inside `views/components` directory. Then, you can create a new component for each icon you want to add. For example:

```ruby
# app/views/components/phlex/icons/custom/icon_class_name.rb

module Phlex
module Icons
module Custom
class IconClassName < Phlex::Icons::Base
def view_template
# SVG code here.
end
end
end
end
end
```

Finally, you will need to create a `Phlex::Icons::Custom` module in `phlex/icons/custom.rb` file to include your custom icons and make them a `Phlex::Kit`:

```ruby
# app/views/components/phlex/icons/custom.rb

module Phlex
module Icons
module Custom
extend Phlex::Kit
end
end
end
```

Now, you can use your custom icons like any other icon pack as described above.

## Update icon packs

All icon packs provided in this gem are auto-generated by their generator under [`generators`](/generators) directory. You just need to clone the repo and run the generator for the icon pack you want to update. Also, there is a GitHub Action that will run the generator for all icon packs and update the gem weekly on each Friday.

## What is the icon pack version used in the gem?

Each icon pack contains a `VERSION` constant in its module represents the version of the icon pack used in the gem. So, for example, to get the Bootstrap version used in the gem you can access it by `Phlex::Icons::Bootstrap::VERSION`.

## Development

After checking out the repo, open it in VSCode and click `Reopen in Container` to start a development container. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).

## Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/AliOsm/phlex-icons. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/AliOsm/phlex-icons/blob/master/CODE_OF_CONDUCT.md).

## License

The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

## Code of Conduct

Everyone interacting in the Phlex::Icons project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/AliOsm/phlex-icons/blob/master/CODE_OF_CONDUCT.md).