Skip to content

Commit

Permalink
Add chevron variants to icons
Browse files Browse the repository at this point in the history
  • Loading branch information
maxatdetroit committed Oct 13, 2023
1 parent dc79cc6 commit d65bc68
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 0 deletions.
20 changes: 20 additions & 0 deletions src/components/atoms/Icon/Icon.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,26 @@ export default class Icon extends HTMLElement {

getIcon(icon, size) {
switch (icon) {
case 'chevron-right':
return `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>`;
case 'chevron-left':
return `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
</svg>`;
case 'chevron-up':
return `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
</svg>`;
case 'chevron-down':
return `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>`;
case 'house':
return `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
Expand Down
4 changes: 4 additions & 0 deletions src/stories/icon.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ export default {
icon: {
control: { type: 'select' },
options: [
'chevron-right',
'chevron-left',
'chevron-up',
'chevron-down',
'house',
'house-fill',
'exclamation-circle',
Expand Down

0 comments on commit d65bc68

Please sign in to comment.