Skip to content

Commit

Permalink
Ajout icone media social X (#98)
Browse files Browse the repository at this point in the history 
Signed-off-by: Alexis Boulerice <[email protected]>
  • Loading branch information
@alexisletrotteur
alexisletrotteur authored Mar 15, 2024
1 parent 0aebec0 commit e620246
Show file tree
Hide file tree
Showing 7 changed files with 38 additions and 3 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).


## [5.0.0] - unreleased

### Changed
Expand All @@ -15,7 +16,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- Styles: Passage de border-bottom à text-decoration pour la gestion des underline de liens.

### Added
- Styles - iconographie: Ajout des icones social-threads, social-twitch, social-vimeo.
- Styles - iconographie: Ajout des icones social-threads, social-twitch, social-vimeo et social-x.
- Styles - iconographie: Ajout des icones accessibilite, astuce, communiquer, demander, erreur, payer, permis, securite, signaler, trouver, trouverMap.
- Components Accordeon: Ajout du bouton Tout ouvrir / Tout fermer avec exemple de script.

Expand Down
2 changes: 1 addition & 1 deletion source/_data/icons.json
View file

Large diffs are not rendered by default.

14 changes: 14 additions & 0 deletions source/css/scss/_icons-utility.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ $data-icon-social-threads: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0
$data-icon-social-twitch: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath d='M17.764 5.446h-1.66v4.714h1.66V5.446zm-4.563-.02h-1.66v4.716h1.66V5.426zM6.147 1L2 4.928v14.144h4.977V23l4.148-3.928h3.32L21.91 12V1H6.147zm14.104 10.216l-3.318 3.142h-3.319l-2.904 2.75v-2.75H6.977V2.572h13.274v8.644z'/%3E %3C/svg%3E";
$data-icon-social-twitter: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' role='icon'%3E %3Cdefs%3E %3Cpath id='social-twitter-a' d='M19.965 8.508c0-.175-.004-.35-.012-.522A8.277 8.277 0 0022 5.894a8.292 8.292 0 01-2.356.636 4.064 4.064 0 001.804-2.234c-.793.462-1.671.799-2.606.98A4.13 4.13 0 0015.847 4c-2.266 0-4.104 1.809-4.104 4.039 0 .317.036.625.107.92a11.712 11.712 0 01-8.458-4.22 3.977 3.977 0 00-.556 2.03 4.02 4.02 0 001.826 3.363 4.122 4.122 0 01-1.858-.505l-.001.051c0 1.957 1.415 3.59 3.292 3.96a4.176 4.176 0 01-1.853.07c.522 1.604 2.037 2.772 3.833 2.805a8.317 8.317 0 01-5.096 1.729c-.331 0-.658-.019-.979-.056A11.751 11.751 0 008.29 20c7.547 0 11.675-6.155 11.675-11.492z'/%3E %3C/defs%3E %3Cuse fill-rule='evenodd' xlink:href='%23social-twitter-a'/%3E %3C/svg%3E";
$data-icon-social-vimeo: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath d='M21.99 7.194c-.093 2.044-1.518 4.843-4.284 8.396-2.854 3.712-5.268 5.569-7.247 5.569-1.223 0-2.259-1.13-3.107-3.39-1.65-6.056-2.354-9.604-3.718-9.604-.159 0-.707.333-1.65.989L1 7.879c2.419-2.124 4.73-4.486 6.178-4.617 1.636-.16 2.64.96 3.019 3.351 1.345 8.508 1.94 9.792 4.387 5.94.877-1.388 1.35-2.443 1.416-3.17.225-2.151-1.678-2.006-2.967-1.453 1.031-3.38 3.005-5.02 5.915-4.926 2.147.056 3.165 1.458 3.043 4.19z'/%3E %3C/svg%3E";
$data-icon-social-x: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath d='M18.244 2.25h3.31l-7.229 8.26 8.503 11.24h-6.656l-5.217-6.816-5.963 6.816H1.678l7.73-8.836L1.256 2.25h6.825l4.711 6.23 5.452-6.23zM17.08 19.772h1.833L7.083 4.125H5.114l11.967 15.647z'/%3E %3C/svg%3E";
$data-icon-social-youtube: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' role='icon'%3E %3Cdefs%3E %3Cpath id='social-youtube-a' d='M22.547 7.19c.471 1.565.453 4.826.453 4.826s0 3.245-.453 4.81c-.254.856-.997 1.532-1.94 1.762C18.888 19 12 19 12 19s-6.868 0-8.608-.428c-.942-.23-1.685-.906-1.939-1.763C1 15.261 1 12 1 12s0-3.245.453-4.81c.254-.856 1.015-1.548 1.94-1.778C5.112 5 12 5 12 5s6.886 0 8.608.428c.942.23 1.685.906 1.939 1.763zM15 12l-5-3v6l5-3z'/%3E %3C/defs%3E %3Cuse fill-rule='evenodd' xlink:href='%23social-youtube-a'/%3E %3C/svg%3E";
$data-icon-star-fill: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.754 7.346l6.39.935a1 1 0 01.554 1.705l-4.623 4.503 1.09 6.362a1 1 0 01-1.45 1.054L12 18.9l-5.715 3.005a1 1 0 01-1.45-1.054l1.09-6.362-4.623-4.503a1 1 0 01.553-1.705l6.39-.935 2.858-5.789a1 1 0 011.794 0l2.857 5.79z'/%3E %3C/svg%3E";
$data-icon-star-half: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.145 8.28l-6.39-.934-2.858-5.789a1 1 0 00-1.794 0l-2.857 5.79-6.39.934a1 1 0 00-.554 1.705l4.623 4.503-1.09 6.362a1 1 0 001.45 1.054L12 18.9l5.715 3.005a1 1 0 001.45-1.054l-1.09-6.362 4.623-4.503a1 1 0 00-.553-1.705zm-7.2.97a1 1 0 01-.752-.547L12 4.259V16.77l4.852 2.422-.838-4.883a1 1 0 01.288-.885l3.55-3.457-4.907-.718z'/%3E %3C/svg%3E";
Expand Down Expand Up @@ -1641,6 +1642,19 @@ $data-icon-x: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2
background-color: $neutral-tertiary;
}
}
.icon-social-x {
&:before {
-webkit-mask: url($data-icon-social-x) no-repeat 50% 50%;
mask: url($data-icon-social-x) no-repeat 50% 50%;
width: 24px;
height: 24px;
content: '';
display: inline-block;
-webkit-mask-size: cover;
mask-size: cover;
background-color: $neutral-tertiary;
}
}
.icon-social-youtube {
&:before {
-webkit-mask: url($data-icon-social-youtube) no-repeat 50% 50%;
Expand Down
14 changes: 14 additions & 0 deletions source/vdm-icon-system/icons/utility/_icons-utility.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ $data-icon-social-threads: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0
$data-icon-social-twitch: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath d='M17.764 5.446h-1.66v4.714h1.66V5.446zm-4.563-.02h-1.66v4.716h1.66V5.426zM6.147 1L2 4.928v14.144h4.977V23l4.148-3.928h3.32L21.91 12V1H6.147zm14.104 10.216l-3.318 3.142h-3.319l-2.904 2.75v-2.75H6.977V2.572h13.274v8.644z'/%3E %3C/svg%3E";
$data-icon-social-twitter: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' role='icon'%3E %3Cdefs%3E %3Cpath id='social-twitter-a' d='M19.965 8.508c0-.175-.004-.35-.012-.522A8.277 8.277 0 0022 5.894a8.292 8.292 0 01-2.356.636 4.064 4.064 0 001.804-2.234c-.793.462-1.671.799-2.606.98A4.13 4.13 0 0015.847 4c-2.266 0-4.104 1.809-4.104 4.039 0 .317.036.625.107.92a11.712 11.712 0 01-8.458-4.22 3.977 3.977 0 00-.556 2.03 4.02 4.02 0 001.826 3.363 4.122 4.122 0 01-1.858-.505l-.001.051c0 1.957 1.415 3.59 3.292 3.96a4.176 4.176 0 01-1.853.07c.522 1.604 2.037 2.772 3.833 2.805a8.317 8.317 0 01-5.096 1.729c-.331 0-.658-.019-.979-.056A11.751 11.751 0 008.29 20c7.547 0 11.675-6.155 11.675-11.492z'/%3E %3C/defs%3E %3Cuse fill-rule='evenodd' xlink:href='%23social-twitter-a'/%3E %3C/svg%3E";
$data-icon-social-vimeo: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath d='M21.99 7.194c-.093 2.044-1.518 4.843-4.284 8.396-2.854 3.712-5.268 5.569-7.247 5.569-1.223 0-2.259-1.13-3.107-3.39-1.65-6.056-2.354-9.604-3.718-9.604-.159 0-.707.333-1.65.989L1 7.879c2.419-2.124 4.73-4.486 6.178-4.617 1.636-.16 2.64.96 3.019 3.351 1.345 8.508 1.94 9.792 4.387 5.94.877-1.388 1.35-2.443 1.416-3.17.225-2.151-1.678-2.006-2.967-1.453 1.031-3.38 3.005-5.02 5.915-4.926 2.147.056 3.165 1.458 3.043 4.19z'/%3E %3C/svg%3E";
$data-icon-social-x: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath d='M18.244 2.25h3.31l-7.229 8.26 8.503 11.24h-6.656l-5.217-6.816-5.963 6.816H1.678l7.73-8.836L1.256 2.25h6.825l4.711 6.23 5.452-6.23zM17.08 19.772h1.833L7.083 4.125H5.114l11.967 15.647z'/%3E %3C/svg%3E";
$data-icon-social-youtube: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' role='icon'%3E %3Cdefs%3E %3Cpath id='social-youtube-a' d='M22.547 7.19c.471 1.565.453 4.826.453 4.826s0 3.245-.453 4.81c-.254.856-.997 1.532-1.94 1.762C18.888 19 12 19 12 19s-6.868 0-8.608-.428c-.942-.23-1.685-.906-1.939-1.763C1 15.261 1 12 1 12s0-3.245.453-4.81c.254-.856 1.015-1.548 1.94-1.778C5.112 5 12 5 12 5s6.886 0 8.608.428c.942.23 1.685.906 1.939 1.763zM15 12l-5-3v6l5-3z'/%3E %3C/defs%3E %3Cuse fill-rule='evenodd' xlink:href='%23social-youtube-a'/%3E %3C/svg%3E";
$data-icon-star-fill: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.754 7.346l6.39.935a1 1 0 01.554 1.705l-4.623 4.503 1.09 6.362a1 1 0 01-1.45 1.054L12 18.9l-5.715 3.005a1 1 0 01-1.45-1.054l1.09-6.362-4.623-4.503a1 1 0 01.553-1.705l6.39-.935 2.858-5.789a1 1 0 011.794 0l2.857 5.79z'/%3E %3C/svg%3E";
$data-icon-star-half: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.145 8.28l-6.39-.934-2.858-5.789a1 1 0 00-1.794 0l-2.857 5.79-6.39.934a1 1 0 00-.554 1.705l4.623 4.503-1.09 6.362a1 1 0 001.45 1.054L12 18.9l5.715 3.005a1 1 0 001.45-1.054l-1.09-6.362 4.623-4.503a1 1 0 00-.553-1.705zm-7.2.97a1 1 0 01-.752-.547L12 4.259V16.77l4.852 2.422-.838-4.883a1 1 0 01.288-.885l3.55-3.457-4.907-.718z'/%3E %3C/svg%3E";
Expand Down Expand Up @@ -1641,6 +1642,19 @@ $data-icon-x: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2
background-color: $neutral-tertiary;
}
}
.icon-social-x {
&:before {
-webkit-mask: url($data-icon-social-x) no-repeat 50% 50%;
mask: url($data-icon-social-x) no-repeat 50% 50%;
width: 24px;
height: 24px;
content: '';
display: inline-block;
-webkit-mask-size: cover;
mask-size: cover;
background-color: $neutral-tertiary;
}
}
.icon-social-youtube {
&:before {
-webkit-mask: url($data-icon-social-youtube) no-repeat 50% 50%;
Expand Down
2 changes: 1 addition & 1 deletion source/vdm-icon-system/icons/utility/icon-utility.json
View file

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions source/vdm-icon-system/icons/utility/svgs-inline-use/social-x.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions source/vdm-icon-system/src/icon-utility/social-x.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e620246

Please sign in to comment.