/* ========================================================================== Icon library. ========================================================================== */ .icon { --icon-size: 16px; width: var(--icon-size); height: var(--icon-size); &:before { content: ""; display: inline-block; width: inherit; height: inherit; mask-repeat: no-repeat; mask-position: center; mask-size: var(--icon-size); background: var(--color-fg); transition: var(--transition); } } /* Variables. ========================================================================== */ :root { --icon-ampoule: url("data:image/svg+xml,"); --icon-database: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A"); --icon-default: url("data:image/svg+xml,"); --icon-default1: url("data:image/svg+xml,"); --icon-economie_chomage: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A"); --icon-economie_entreprise_et_salarie: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A"); --icon-economie_niveau_de_vie: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A"); --icon-icon--category: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A"); --icon-line: url("data:image/svg+xml,"); --icon-logement_construction: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A"); --icon-logement_energie: url("data:image/svg+xml,"); --icon-logement_loyer: url("data:image/svg+xml,"); --icon-logement_parc_logement: url("data:image/svg+xml,"); --icon-logement_sociaux: url("data:image/svg+xml,"); --icon-logement_vacant: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A"); --icon-logement_valeur_fonciere: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A"); --icon-phone: url("data:image/svg+xml,"); --icon-population: url("data:image/svg+xml,"); --icon-population_csp: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A"); --icon-population_menage: url("data:image/svg+xml,"); --icon-population_selon_age: url("data:image/svg+xml,"); --icon-z_handle_e: url("data:image/svg+xml,"); --icon-z_handle_w: url("data:image/svg+xml,"); } /* Classes. ========================================================================== */ .icon--ampoule:before { mask-image: var(--icon-ampoule); } .icon--database:before { mask-image: var(--icon-database); } .icon--default:before { mask-image: var(--icon-default); } .icon--default1:before { mask-image: var(--icon-default1); } .icon--economie_chomage:before { mask-image: var(--icon-economie_chomage); } .icon--economie_entreprise_et_salarie:before { mask-image: var(--icon-economie_entreprise_et_salarie); } .icon--economie_niveau_de_vie:before { mask-image: var(--icon-economie_niveau_de_vie); } .icon--icon--category:before { mask-image: var(--icon-icon--category); } .icon--line:before { mask-image: var(--icon-line); } .icon--logement_construction:before { mask-image: var(--icon-logement_construction); } .icon--logement_energie:before { mask-image: var(--icon-logement_energie); } .icon--logement_loyer:before { mask-image: var(--icon-logement_loyer); } .icon--logement_parc_logement:before { mask-image: var(--icon-logement_parc_logement); } .icon--logement_sociaux:before { mask-image: var(--icon-logement_sociaux); } .icon--logement_vacant:before { mask-image: var(--icon-logement_vacant); } .icon--logement_valeur_fonciere:before { mask-image: var(--icon-logement_valeur_fonciere); } .icon--phone:before { mask-image: var(--icon-phone); } .icon--population:before { mask-image: var(--icon-population); } .icon--population_csp:before { mask-image: var(--icon-population_csp); } .icon--population_menage:before { mask-image: var(--icon-population_menage); } .icon--population_selon_age:before { mask-image: var(--icon-population_selon_age); } .icon--z_handle_e:before { mask-image: var(--icon-z_handle_e); } .icon--z_handle_w:before { mask-image: var(--icon-z_handle_w); }

Population : comparaison