How to use
A component to display an icon.
Hiker provides a selection of built-in icons you can use just by referencing their name. You can, however, also use custom icons.
Icon::make('user') ->color('#7959EF'),
Available icons
- add-to-bag
- add-to-basket
- alert-circle
- align-bottom
- align-center-horizontal
- align-center-vertical
- align-center
- align-left-alt
- align-left
- align-right-alt
- align-right
- align-top
- archive
- arrow-bottom-left
- arrow-bottom-right
- arrow-circle-down
- arrow-circle-left
- arrow-circle-right
- arrow-circle-up
- arrow-double-down
- arrow-double-left
- arrow-double-right
- arrow-double-up
- arrow-down
- arrow-filled-down
- arrow-filled-left
- arrow-filled-right
- arrow-filled-up
- arrow-left
- arrow-right
- arrow-up
- arrow-upper-left
- arrow-upper-right
- award
- bag-discount
- bag
- bank
- book-closed
- book-open
- bookmark-alt
- bookmark
- bottle
- box
- calculator
- calendar-add
- calendar
- camera
- candy
- chart-pie
- chart-square
- chat-add
- chat-alt
- chat-empty
- chat
- check-box
- check-square
- checkmark-circle
- checkmark-small
- checkmark
- chevron-down-small
- chevron-down
- chevron-left-small
- chevron-left
- chevron-right-small
- chevron-right
- chevron-up-small
- chevron-up
- clipboard-check
- clipboard-copy
- clipboard
- clock-time
- close-circle
- close-small
- close
- cloud-download
- cloud-upload
- collapse
- column-add
- column-edit
- column-remove
- copy-duplicate
- credit-card
- dashboard-alt
- dashboard
- database
- delete
- diamond
- document-add-alt
- document-add
- document-check
- document-credit-note
- document-duplicate
- document-edit
- document-error
- document-euro
- document-remove-alt
- document-remove
- document-report
- document
- download
- edit-alt
- edit
- emoji-happy
- emoji-sad
- enter-login
- euro-alt
- euro
- exit-logout
- expand
- extend
- eye-closed
- eye-open
- file-archive
- file-excel
- file-image
- file-pdf
- file-powerpoint
- file-text
- file-video
- file-word
- filter
- flag-wave
- flag
- folder-add
- folder-remove
- folder
- fries
- glasses-admin
- grip-horizontal
- grip-vertical
- group
- happy
- heart-like
- help-support
- help
- home
- image
- inbox-in
- inbox-out
- inbox
- info-circle
- job
- justify-center
- justify-left
- justify-right
- key
- laptop
- layout-grid
- layout-list-alt
- layout-list
- leaf
- link-external
- link
- lock-closed
- lock-open
- looped-square
- mail-open
- map-pin
- map
- menu-alt
- menu
- minimize-1
- minimize-2
- minus-circle
- minus-filled
- minus-small
- minus
- money-cash-alt
- money-cash
- money-coins
- money-in-alt
- money-in
- money-out-alt
- money-out
- moon
- more-horizontal
- more-vertical
- notification-bell
- order-list
- pallet-stock
- pallet
- paper-airplane
- pencil-alt
- pencil
- percent
- phone-call-in
- phone-call-missed
- phone-call-out
- phone
- piggy-bank
- pin
- plate-stock
- plus-circle
- plus-filled
- plus-small
- plus
- printer
- refresh
- reply
- review
- row-add
- row-remove
- sad
- scale-alt
- scale
- search
- selector
- settings-alt
- settings
- shield
- shop-store
- shopping-bag
- shopping-basket
- shopping-cart
- shovel
- smartphone
- star-full
- star-half
- star-off
- stop-alt
- stop
- sun
- switch-horizontal
- switch-vertical
- table-add
- table-remove
- tablet
- tag
- trash
- trending-down
- trending-up
- truck
- upload
- user-add
- user-alt
- user-circle
- user-product-manager
- user-remove
- user
- users
- verified
- video-alt
- video
- volume-high
- volume-low
- volume-off
- wifi-off
- wifi
- zoom-minus
- zoom-plus
Using custom icons
Instead of instanciating the icon by one of the names provided above, you can simply pass an absolute path to a SVG file of your own. It will be rendered by the icon component.
Please note, for compatibility with the HasColor trait which allows you to render your icon in any color you like, your custom SVG must not have any fill or stroke colors set by default.
Available methods
set(string $icon): static
Set the icon, by name or absolute path.
Icon::make()->set('user') Icon::make()->set(base_path('resources/icons/user.svg'))
Inherited methods
The Icon component extends the base component and inherits all of its methods.
It also inherits the methods from the following traits: