2.0.8 • Published 6 years ago

@komposit/icons

Licence

—

Version

2.0.8

Deps

Size

145 kB

Vulns

Weekly

DeprecatedThis package is deprecated

Summary Dependency Versions

`@komposit/icons`

Package exposing all the official SVG icons

About

This package extracts all Decathlon icons from the designers library (.sketch file).

Usage :

npm install @komposit/icons

According to your needs, your constraints and your browser support, you can :

use the svg icons "as-is" in your project (inline use)
generate a font-icon or an svg sprite
use a pre-made sprite with all the icons

The configuration of your build tool / bundler is at your discretion. You can use Webpack, Rollup, Parcel, Gulp...

Guidelines and implementation overview : https://fvsch.com/svg-icons/

Inline use

Use inline (svg embedded in html) when rendering speed matters (e.g. icons at top of the page). Drawback : you will loose caching

Links : (principle) https://css-tricks.com/pretty-good-svg-icon-system/ (webpack-loader) https://webpack.js.org/loaders/svg-inline-loader/#root

SVG Sprite

Use svg sprites for icons sytems. You can reference the sprite in HTML (use directive) or in CSS. Prefer an external file (cacheable).

Links : (webpack plugin) https://github.com/JetBrains/svg-sprite-loader/ (node JS toolset, postCSS, etc.) https://github.com/JetBrains/svg-mixer

Premade sprite

Use premade sprite if your scope is corporate apps (not public facing) If you don't want the complexity involved with a webperf-focused build system.

Icon list :

arrows

arrow1_down	`@komposit/icons/dist/svg/arrows/arrows-arrow1_down.svg`
arrow1_left	`@komposit/icons/dist/svg/arrows/arrows-arrow1_left.svg`
arrow1_right	`@komposit/icons/dist/svg/arrows/arrows-arrow1_right.svg`
arrow1_up	`@komposit/icons/dist/svg/arrows/arrows-arrow1_up.svg`
arrow2_down	`@komposit/icons/dist/svg/arrows/arrows-arrow2_down.svg`
arrow2_left	`@komposit/icons/dist/svg/arrows/arrows-arrow2_left.svg`
arrow2_right	`@komposit/icons/dist/svg/arrows/arrows-arrow2_right.svg`
arrow2_up	`@komposit/icons/dist/svg/arrows/arrows-arrow2_up.svg`
download	`@komposit/icons/dist/svg/arrows/arrows-download.svg`
scroll_down	`@komposit/icons/dist/svg/arrows/arrows-scroll_down.svg`

delivery

home_delivery	`@komposit/icons/dist/svg/delivery/delivery-home_delivery.svg`
pickup_1h	`@komposit/icons/dist/svg/delivery/delivery-pickup_1h.svg`
pickup_relay	`@komposit/icons/dist/svg/delivery/delivery-pickup_relay.svg`
pickup_store	`@komposit/icons/dist/svg/delivery/delivery-pickup_store.svg`
purchase	`@komposit/icons/dist/svg/delivery/delivery-purchase.svg`
ship_from_store	`@komposit/icons/dist/svg/delivery/delivery-ship_from_store.svg`

forms

attachement	`@komposit/icons/dist/svg/forms/forms-attachement.svg`
checkbox_off	`@komposit/icons/dist/svg/forms/forms-checkbox_off.svg`
checkbox_on	`@komposit/icons/dist/svg/forms/forms-checkbox_on.svg`
close	`@komposit/icons/dist/svg/forms/forms-close.svg`
cross	`@komposit/icons/dist/svg/forms/forms-cross.svg`
cross_rounded	`@komposit/icons/dist/svg/forms/forms-cross_rounded.svg`
delete	`@komposit/icons/dist/svg/forms/forms-delete.svg`
document	`@komposit/icons/dist/svg/forms/forms-document.svg`
edit	`@komposit/icons/dist/svg/forms/forms-edit.svg`
edit_equal	`@komposit/icons/dist/svg/forms/forms-edit_equal.svg`
edit_minus	`@komposit/icons/dist/svg/forms/forms-edit_minus.svg`
edit_plus	`@komposit/icons/dist/svg/forms/forms-edit_plus.svg`
eye_off	`@komposit/icons/dist/svg/forms/forms-eye_off.svg`
eye_on	`@komposit/icons/dist/svg/forms/forms-eye_on.svg`
login	`@komposit/icons/dist/svg/forms/forms-login.svg`
printer	`@komposit/icons/dist/svg/forms/forms-printer.svg`
radio_off	`@komposit/icons/dist/svg/forms/forms-radio_off.svg`
radio_on	`@komposit/icons/dist/svg/forms/forms-radio_on.svg`
valid	`@komposit/icons/dist/svg/forms/forms-valid.svg`
valid_rounded	`@komposit/icons/dist/svg/forms/forms-valid_rounded.svg`

media

desktop	`@komposit/icons/dist/svg/media/media-desktop.svg`
image	`@komposit/icons/dist/svg/media/media-image.svg`
mobile	`@komposit/icons/dist/svg/media/media-mobile.svg`
music	`@komposit/icons/dist/svg/media/media-music.svg`
picture	`@komposit/icons/dist/svg/media/media-picture.svg`
player_fullscreen	`@komposit/icons/dist/svg/media/media-player_fullscreen.svg`
player_pause	`@komposit/icons/dist/svg/media/media-player_pause.svg`
player_play	`@komposit/icons/dist/svg/media/media-player_play.svg`
player_replay	`@komposit/icons/dist/svg/media/media-player_replay.svg`
slider_dot_blue	`@komposit/icons/dist/svg/media/media-slider_dot_blue.svg`
sound_0	`@komposit/icons/dist/svg/media/media-sound_0.svg`
sound_1	`@komposit/icons/dist/svg/media/media-sound_1.svg`
sound_2	`@komposit/icons/dist/svg/media/media-sound_2.svg`
sound_3	`@komposit/icons/dist/svg/media/media-sound_3.svg`
video	`@komposit/icons/dist/svg/media/media-video.svg`

payment

bill	`@komposit/icons/dist/svg/payment/payment-bill.svg`
credit_card	`@komposit/icons/dist/svg/payment/payment-credit_card.svg`
euro_card	`@komposit/icons/dist/svg/payment/payment-euro_card.svg`
express_checkout	`@komposit/icons/dist/svg/payment/payment-express_checkout.svg`
giftcard	`@komposit/icons/dist/svg/payment/payment-giftcard.svg`
i_payment	`@komposit/icons/dist/svg/payment/payment-i_payment.svg`
payment	`@komposit/icons/dist/svg/payment/payment-payment.svg`
promo	`@komposit/icons/dist/svg/payment/payment-promo.svg`
secured_payment	`@komposit/icons/dist/svg/payment/payment-secured_payment.svg`
wechat_pay	`@komposit/icons/dist/svg/payment/payment-wechat_pay.svg`

privacy

approval	`@komposit/icons/dist/svg/privacy/privacy-approval.svg`
data_time	`@komposit/icons/dist/svg/privacy/privacy-data_time.svg`
decision	`@komposit/icons/dist/svg/privacy/privacy-decision.svg`
legal_base	`@komposit/icons/dist/svg/privacy/privacy-legal_base.svg`
out_europe	`@komposit/icons/dist/svg/privacy/privacy-out_europe.svg`
purpose	`@komposit/icons/dist/svg/privacy/privacy-purpose.svg`
resp	`@komposit/icons/dist/svg/privacy/privacy-resp.svg`
security	`@komposit/icons/dist/svg/privacy/privacy-security.svg`

products

360	`@komposit/icons/dist/svg/products/products-360.svg`
clothes	`@komposit/icons/dist/svg/products/products-clothes.svg`
size_guide	`@komposit/icons/dist/svg/products/products-size_guide.svg`
sizes	`@komposit/icons/dist/svg/products/products-sizes.svg`
technicity	`@komposit/icons/dist/svg/products/products-technicity.svg`

reviews

bad_mood	`@komposit/icons/dist/svg/reviews/reviews-bad_mood.svg`
happy	`@komposit/icons/dist/svg/reviews/reviews-happy.svg`
heart	`@komposit/icons/dist/svg/reviews/reviews-heart.svg`
heart_full	`@komposit/icons/dist/svg/reviews/reviews-heart_full.svg`
neutral	`@komposit/icons/dist/svg/reviews/reviews-neutral.svg`
opinion	`@komposit/icons/dist/svg/reviews/reviews-opinion.svg`
rage_face	`@komposit/icons/dist/svg/reviews/reviews-rage_face.svg`
smile	`@komposit/icons/dist/svg/reviews/reviews-smile.svg`
star_empty	`@komposit/icons/dist/svg/reviews/reviews-star_empty.svg`
star_full	`@komposit/icons/dist/svg/reviews/reviews-star_full.svg`
thumb_down	`@komposit/icons/dist/svg/reviews/reviews-thumb_down.svg`
thumb_up	`@komposit/icons/dist/svg/reviews/reviews-thumb_up.svg`

services

badge	`@komposit/icons/dist/svg/services/services-badge.svg`
chat	`@komposit/icons/dist/svg/services/services-chat.svg`
clock	`@komposit/icons/dist/svg/services/services-clock.svg`
decathlon_card	`@komposit/icons/dist/svg/services/services-decathlon_card.svg`
documents	`@komposit/icons/dist/svg/services/services-documents.svg`
exchange_return	`@komposit/icons/dist/svg/services/services-exchange_return.svg`
funding	`@komposit/icons/dist/svg/services/services-funding.svg`
gift	`@komposit/icons/dist/svg/services/services-gift.svg`
info	`@komposit/icons/dist/svg/services/services-info.svg`
insurance	`@komposit/icons/dist/svg/services/services-insurance.svg`
itinerary	`@komposit/icons/dist/svg/services/services-itinerary.svg`
maintain	`@komposit/icons/dist/svg/services/services-maintain.svg`
perso	`@komposit/icons/dist/svg/services/services-perso.svg`
repair	`@komposit/icons/dist/svg/services/services-repair.svg`
stamp	`@komposit/icons/dist/svg/services/services-stamp.svg`
test_buy	`@komposit/icons/dist/svg/services/services-test_buy.svg`
warranty	`@komposit/icons/dist/svg/services/services-warranty.svg`

social

facebook	`@komposit/icons/dist/svg/social/social-facebook.svg`
googleplus	`@komposit/icons/dist/svg/social/social-googleplus.svg`
instagram	`@komposit/icons/dist/svg/social/social-instagram.svg`
pinterest	`@komposit/icons/dist/svg/social/social-pinterest.svg`
share	`@komposit/icons/dist/svg/social/social-share.svg`
twitter	`@komposit/icons/dist/svg/social/social-twitter.svg`
youtube	`@komposit/icons/dist/svg/social/social-youtube.svg`

standard

account	`@komposit/icons/dist/svg/standard/standard-account.svg`
agenda	`@komposit/icons/dist/svg/standard/standard-agenda.svg`
cart	`@komposit/icons/dist/svg/standard/standard-cart.svg`
catalog	`@komposit/icons/dist/svg/standard/standard-catalog.svg`
compare	`@komposit/icons/dist/svg/standard/standard-compare.svg`
external_link	`@komposit/icons/dist/svg/standard/standard-external_link.svg`
filter	`@komposit/icons/dist/svg/standard/standard-filter.svg`
filter2	`@komposit/icons/dist/svg/standard/standard-filter2.svg`
geolocalization	`@komposit/icons/dist/svg/standard/standard-geolocalization.svg`
home	`@komposit/icons/dist/svg/standard/standard-home.svg`
hourglass	`@komposit/icons/dist/svg/standard/standard-hourglass.svg`
lock	`@komposit/icons/dist/svg/standard/standard-lock.svg`
mail	`@komposit/icons/dist/svg/standard/standard-mail.svg`
menu	`@komposit/icons/dist/svg/standard/standard-menu.svg`
notif_advice	`@komposit/icons/dist/svg/standard/standard-notif_advice.svg`
notif_alert	`@komposit/icons/dist/svg/standard/standard-notif_alert.svg`
notif_bell	`@komposit/icons/dist/svg/standard/standard-notif_bell.svg`
notif_help	`@komposit/icons/dist/svg/standard/standard-notif_help.svg`
notif_information	`@komposit/icons/dist/svg/standard/standard-notif_information.svg`
pin	`@komposit/icons/dist/svg/standard/standard-pin.svg`
search	`@komposit/icons/dist/svg/standard/standard-search.svg`
sort	`@komposit/icons/dist/svg/standard/standard-sort.svg`
store	`@komposit/icons/dist/svg/standard/standard-store.svg`
submenu	`@komposit/icons/dist/svg/standard/standard-submenu.svg`

tiny_bold

arrow_down	`@komposit/icons/dist/svg/tiny_bold/tiny_bold-arrow_down.svg`
arrow_left	`@komposit/icons/dist/svg/tiny_bold/tiny_bold-arrow_left.svg`
arrow_right	`@komposit/icons/dist/svg/tiny_bold/tiny_bold-arrow_right.svg`
arrow_up	`@komposit/icons/dist/svg/tiny_bold/tiny_bold-arrow_up.svg`
cross	`@komposit/icons/dist/svg/tiny_bold/tiny_bold-cross.svg`
minus	`@komposit/icons/dist/svg/tiny_bold/tiny_bold-minus.svg`
plus	`@komposit/icons/dist/svg/tiny_bold/tiny_bold-plus.svg`
search	`@komposit/icons/dist/svg/tiny_bold/tiny_bold-search.svg`
valid	`@komposit/icons/dist/svg/tiny_bold/tiny_bold-valid.svg`