Skip to content

Commit

Permalink
Iconographie: ajout arrow-up et arrow-down (#99)
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 21, 2024
1 parent e4dd0e9 commit 1d927f9
Show file tree
Hide file tree
Showing 8 changed files with 70 additions and 2 deletions.
2 changes: 1 addition & 1 deletion source/_data/icons.json
View file

Large diffs are not rendered by default.

28 changes: 28 additions & 0 deletions source/css/scss/_icons-utility.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ $data-icon-anchor: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' x
$data-icon-anomaly: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath d='M8.27 3L3 8.27v7.46L8.27 21h7.46C17.5 19.24 21 15.73 21 15.73V8.27L15.73 3H8.27zm.83 2h5.8L19 9.1v5.8L14.9 19H9.1L5 14.9V9.1L9.1 5zM11 15h2v2h-2v-2zm0-8h2v6h-2V7z'/%3E %3C/svg%3E";
$data-icon-apps: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M4 1h4a3 3 0 013 3v4a3 3 0 01-3 3H4a3 3 0 01-3-3V4a3 3 0 013-3zm0 2a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V4a1 1 0 00-1-1H4zm0 10h4a3 3 0 013 3v4a3 3 0 01-3 3H4a3 3 0 01-3-3v-4a3 3 0 013-3zm0 2a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1H4zM16 1h4a3 3 0 013 3v4a3 3 0 01-3 3h-4a3 3 0 01-3-3V4a3 3 0 013-3zm0 2a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V4a1 1 0 00-1-1h-4zm4 18a1 1 0 010 2h-4a3 3 0 01-3-3v-4a3 3 0 013-3h4a3 3 0 013 3v3a1 1 0 01-2 0v-3a1 1 0 00-1-1h-4a1 1 0 00-1 1v4a1 1 0 001 1h4z'/%3E %3C/svg%3E";
$data-icon-archive: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M2 9H1a1 1 0 01-1-1V3a1 1 0 011-1h22a1 1 0 011 1v5a1 1 0 01-1 1H4v11h16v-8a1 1 0 012 0v9a1 1 0 01-1 1H3a1 1 0 01-1-1V9zm0-5v3h20V4H2zm8 9a1 1 0 010-2h4a1 1 0 010 2h-4z'/%3E %3C/svg%3E";
$data-icon-arrow-down: "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='M17.293 13.293a1 1 0 011.414 1.414l-3.035 3.035a1 1 0 01-1.414-1.414l3.035-3.035zM11 4a1 1 0 112 0v16a1 1 0 01-1.707.707l-6-6a1 1 0 111.414-1.414L11 17.586V4z'/%3E %3C/svg%3E";
$data-icon-arrow-left: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M3.073 11.624a1 1 0 00.22 1.083l6 6a1 1 0 001.414-1.414L6.414 13H20a1 1 0 000-2H4a1 1 0 00-.921.61zm7.634-4.917a1 1 0 10-1.414-1.414L6.258 8.328a1 1 0 101.414 1.414l3.035-3.035z'/%3E %3C/svg%3E";
$data-icon-arrow-right: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M20.927 11.624a1 1 0 01-.22 1.083l-6 6a1 1 0 01-1.414-1.414L17.586 13H4a1 1 0 010-2h16a1 1 0 01.921.61zm-7.634-4.917a1 1 0 111.414-1.414l3.035 3.035a1 1 0 11-1.414 1.414l-3.035-3.035z'/%3E %3C/svg%3E";
$data-icon-arrow-up: "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='M6.707 10.707a1 1 0 01-1.414-1.414l3.035-3.035a1 1 0 011.414 1.414l-3.035 3.035zM13 20a1 1 0 11-2 0V4a1 1 0 011.707-.707l6 6a1 1 0 01-1.414 1.414L13 6.414V20z'/%3E %3C/svg%3E";
$data-icon-bell-active: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M12 1a1 1 0 01.993.883L13 2v1.07c3.392.486 6 3.404 6 6.93v4.172c0 1.545.614 3.028 1.707 4.12.63.63.184 1.708-.707 1.708h-5l-.005.176A3 3 0 019 20.001L4 20c-.89 0-1.337-1.077-.707-1.707A5.828 5.828 0 005 14.172V10a7.002 7.002 0 016-6.93V2a1 1 0 011-1zm1 19h-2a1 1 0 002 0zM12 5a5 5 0 00-5 5v4.172C7 15.524 6.65 16.84 6 18h12c-.65-1.16-1-2.476-1-3.828V10a5 5 0 00-5-5zM5.6 1.793a1 1 0 010 1.414 8.967 8.967 0 00-2.636 6.364 1 1 0 11-2 0c0-2.898 1.132-5.688 3.222-7.778a1 1 0 011.415 0zm14.143 0a10.967 10.967 0 013.221 7.778 1 1 0 01-2 0 8.967 8.967 0 00-2.636-6.364 1 1 0 111.415-1.414z'/%3E %3C/svg%3E";
$data-icon-bell-off: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M1.613.21l.094.083 22 22a1 1 0 01-1.32 1.497l-.094-.083L18.584 20H15V20a3 3 0 01-6 0v-.001L4 20c-.852 0-1.297-.986-.783-1.623l.076-.084A5.828 5.828 0 005 14.172c0-.029.001-.057.003-.085L5 14v-4c0-1.004.248-1.875.75-2.832L.294 1.708A1 1 0 011.613.21zM11 19.999V20a1 1 0 002 0v-.001h-2zM7.257 8.674c-.15.385-.23.747-.252 1.126L7 10v4l-.005.083.005.089c0 1.24-.294 2.449-.844 3.535L6 18l10.584-.001-9.327-9.325zM12 1a1 1 0 01.993.883L13 2l.001 1.071A7.002 7.002 0 0119 10v3a1 1 0 01-2 0v-3a5 5 0 00-7.172-4.505 1 1 0 11-.87-1.8A6.955 6.955 0 0111 3.07V2a1 1 0 011-1z'/%3E %3C/svg%3E";
$data-icon-bell: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M12 1a1 1 0 011 1l.001 1.071A7.002 7.002 0 0119 10v4.172c0 1.545.614 3.028 1.707 4.12.63.63.184 1.708-.707 1.708h-5a3 3 0 01-6 0H4c-.89 0-1.337-1.077-.707-1.707A5.828 5.828 0 005 14.172V10a7.002 7.002 0 016-6.93V2a1 1 0 011-1zm1 19h-2a1 1 0 002 0zM12 5a5 5 0 00-5 5v4.172C7 15.524 6.65 16.84 6 18h12c-.65-1.16-1-2.476-1-3.828V10a5 5 0 00-5-5z'/%3E %3C/svg%3E";
Expand Down Expand Up @@ -251,6 +253,19 @@ $data-icon-x: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2
background-color: $neutral-tertiary;
}
}
.icon-arrow-down {
&:before {
-webkit-mask: url($data-icon-arrow-down) no-repeat 50% 50%;
mask: url($data-icon-arrow-down) no-repeat 50% 50%;
width: 24px;
height: 24px;
content: '';
display: inline-block;
-webkit-mask-size: cover;
mask-size: cover;
background-color: $neutral-tertiary;
}
}
.icon-arrow-left {
&:before {
-webkit-mask: url($data-icon-arrow-left) no-repeat 50% 50%;
Expand All @@ -277,6 +292,19 @@ $data-icon-x: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2
background-color: $neutral-tertiary;
}
}
.icon-arrow-up {
&:before {
-webkit-mask: url($data-icon-arrow-up) no-repeat 50% 50%;
mask: url($data-icon-arrow-up) no-repeat 50% 50%;
width: 24px;
height: 24px;
content: '';
display: inline-block;
-webkit-mask-size: cover;
mask-size: cover;
background-color: $neutral-tertiary;
}
}
.icon-bell-active {
&:before {
-webkit-mask: url($data-icon-bell-active) no-repeat 50% 50%;
Expand Down
28 changes: 28 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 @@ -6,8 +6,10 @@ $data-icon-anchor: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' x
$data-icon-anomaly: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath d='M8.27 3L3 8.27v7.46L8.27 21h7.46C17.5 19.24 21 15.73 21 15.73V8.27L15.73 3H8.27zm.83 2h5.8L19 9.1v5.8L14.9 19H9.1L5 14.9V9.1L9.1 5zM11 15h2v2h-2v-2zm0-8h2v6h-2V7z'/%3E %3C/svg%3E";
$data-icon-apps: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M4 1h4a3 3 0 013 3v4a3 3 0 01-3 3H4a3 3 0 01-3-3V4a3 3 0 013-3zm0 2a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V4a1 1 0 00-1-1H4zm0 10h4a3 3 0 013 3v4a3 3 0 01-3 3H4a3 3 0 01-3-3v-4a3 3 0 013-3zm0 2a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1H4zM16 1h4a3 3 0 013 3v4a3 3 0 01-3 3h-4a3 3 0 01-3-3V4a3 3 0 013-3zm0 2a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V4a1 1 0 00-1-1h-4zm4 18a1 1 0 010 2h-4a3 3 0 01-3-3v-4a3 3 0 013-3h4a3 3 0 013 3v3a1 1 0 01-2 0v-3a1 1 0 00-1-1h-4a1 1 0 00-1 1v4a1 1 0 001 1h4z'/%3E %3C/svg%3E";
$data-icon-archive: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M2 9H1a1 1 0 01-1-1V3a1 1 0 011-1h22a1 1 0 011 1v5a1 1 0 01-1 1H4v11h16v-8a1 1 0 012 0v9a1 1 0 01-1 1H3a1 1 0 01-1-1V9zm0-5v3h20V4H2zm8 9a1 1 0 010-2h4a1 1 0 010 2h-4z'/%3E %3C/svg%3E";
$data-icon-arrow-down: "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='M17.293 13.293a1 1 0 011.414 1.414l-3.035 3.035a1 1 0 01-1.414-1.414l3.035-3.035zM11 4a1 1 0 112 0v16a1 1 0 01-1.707.707l-6-6a1 1 0 111.414-1.414L11 17.586V4z'/%3E %3C/svg%3E";
$data-icon-arrow-left: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M3.073 11.624a1 1 0 00.22 1.083l6 6a1 1 0 001.414-1.414L6.414 13H20a1 1 0 000-2H4a1 1 0 00-.921.61zm7.634-4.917a1 1 0 10-1.414-1.414L6.258 8.328a1 1 0 101.414 1.414l3.035-3.035z'/%3E %3C/svg%3E";
$data-icon-arrow-right: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M20.927 11.624a1 1 0 01-.22 1.083l-6 6a1 1 0 01-1.414-1.414L17.586 13H4a1 1 0 010-2h16a1 1 0 01.921.61zm-7.634-4.917a1 1 0 111.414-1.414l3.035 3.035a1 1 0 11-1.414 1.414l-3.035-3.035z'/%3E %3C/svg%3E";
$data-icon-arrow-up: "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='M6.707 10.707a1 1 0 01-1.414-1.414l3.035-3.035a1 1 0 011.414 1.414l-3.035 3.035zM13 20a1 1 0 11-2 0V4a1 1 0 011.707-.707l6 6a1 1 0 01-1.414 1.414L13 6.414V20z'/%3E %3C/svg%3E";
$data-icon-bell-active: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M12 1a1 1 0 01.993.883L13 2v1.07c3.392.486 6 3.404 6 6.93v4.172c0 1.545.614 3.028 1.707 4.12.63.63.184 1.708-.707 1.708h-5l-.005.176A3 3 0 019 20.001L4 20c-.89 0-1.337-1.077-.707-1.707A5.828 5.828 0 005 14.172V10a7.002 7.002 0 016-6.93V2a1 1 0 011-1zm1 19h-2a1 1 0 002 0zM12 5a5 5 0 00-5 5v4.172C7 15.524 6.65 16.84 6 18h12c-.65-1.16-1-2.476-1-3.828V10a5 5 0 00-5-5zM5.6 1.793a1 1 0 010 1.414 8.967 8.967 0 00-2.636 6.364 1 1 0 11-2 0c0-2.898 1.132-5.688 3.222-7.778a1 1 0 011.415 0zm14.143 0a10.967 10.967 0 013.221 7.778 1 1 0 01-2 0 8.967 8.967 0 00-2.636-6.364 1 1 0 111.415-1.414z'/%3E %3C/svg%3E";
$data-icon-bell-off: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M1.613.21l.094.083 22 22a1 1 0 01-1.32 1.497l-.094-.083L18.584 20H15V20a3 3 0 01-6 0v-.001L4 20c-.852 0-1.297-.986-.783-1.623l.076-.084A5.828 5.828 0 005 14.172c0-.029.001-.057.003-.085L5 14v-4c0-1.004.248-1.875.75-2.832L.294 1.708A1 1 0 011.613.21zM11 19.999V20a1 1 0 002 0v-.001h-2zM7.257 8.674c-.15.385-.23.747-.252 1.126L7 10v4l-.005.083.005.089c0 1.24-.294 2.449-.844 3.535L6 18l10.584-.001-9.327-9.325zM12 1a1 1 0 01.993.883L13 2l.001 1.071A7.002 7.002 0 0119 10v3a1 1 0 01-2 0v-3a5 5 0 00-7.172-4.505 1 1 0 11-.87-1.8A6.955 6.955 0 0111 3.07V2a1 1 0 011-1z'/%3E %3C/svg%3E";
$data-icon-bell: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M12 1a1 1 0 011 1l.001 1.071A7.002 7.002 0 0119 10v4.172c0 1.545.614 3.028 1.707 4.12.63.63.184 1.708-.707 1.708h-5a3 3 0 01-6 0H4c-.89 0-1.337-1.077-.707-1.707A5.828 5.828 0 005 14.172V10a7.002 7.002 0 016-6.93V2a1 1 0 011-1zm1 19h-2a1 1 0 002 0zM12 5a5 5 0 00-5 5v4.172C7 15.524 6.65 16.84 6 18h12c-.65-1.16-1-2.476-1-3.828V10a5 5 0 00-5-5z'/%3E %3C/svg%3E";
Expand Down Expand Up @@ -251,6 +253,19 @@ $data-icon-x: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2
background-color: $neutral-tertiary;
}
}
.icon-arrow-down {
&:before {
-webkit-mask: url($data-icon-arrow-down) no-repeat 50% 50%;
mask: url($data-icon-arrow-down) no-repeat 50% 50%;
width: 24px;
height: 24px;
content: '';
display: inline-block;
-webkit-mask-size: cover;
mask-size: cover;
background-color: $neutral-tertiary;
}
}
.icon-arrow-left {
&:before {
-webkit-mask: url($data-icon-arrow-left) no-repeat 50% 50%;
Expand All @@ -277,6 +292,19 @@ $data-icon-x: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2
background-color: $neutral-tertiary;
}
}
.icon-arrow-up {
&:before {
-webkit-mask: url($data-icon-arrow-up) no-repeat 50% 50%;
mask: url($data-icon-arrow-up) no-repeat 50% 50%;
width: 24px;
height: 24px;
content: '';
display: inline-block;
-webkit-mask-size: cover;
mask-size: cover;
background-color: $neutral-tertiary;
}
}
.icon-bell-active {
&:before {
-webkit-mask: url($data-icon-bell-active) 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/arrow-down.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/icons/utility/svgs-inline-use/arrow-up.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/arrow-down.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/arrow-up.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 1d927f9

Please sign in to comment.