add optional style

This commit is contained in:
MathieuG-P
2022-07-19 18:36:16 +02:00
parent 2687877d21
commit 236a1be31e
18 changed files with 86 additions and 54 deletions
@@ -7,7 +7,7 @@ import { TerminalIcon } from "./icons/terminal-icon.component";
import { DesktopIcon } from "./icons/desktop-icon.component";
import { OculusIcon } from "./icons/oculus-icon.component";
import { AddIcon } from "./icons/add-icon.component";
import CrossIcon from "./icons/cross-icon.component";
import { CrossIcon } from "./icons/cross-icon.component";
import { FranceIcon } from "./flags/france-icon.component";
import { SpainIcon } from "./flags/spain-icon.component";
import { UsaIcon } from "./flags/usa-icon.component";
@@ -15,6 +15,7 @@ import { UkIcon } from "./flags/uk-icon.component";
import { TaskIcon } from "./icons/task-icon.component";
import { CopyIcon } from "./icons/copy-icon.component";
import { SteamIcon } from "./icons/steam-icon.component";
import { CSSProperties } from "react";
export type BsmIconType = (
"settings"|"trash"|"favorite"|"folder"|"bsNote"|
@@ -23,27 +24,27 @@ export type BsmIconType = (
"fr-FR-flag"|"es-ES-flag"|"en-US-flag"|"en-EN-flag"
);
export function BsmIcon({className, icon}: {className?: string, icon: BsmIconType}) {
export function BsmIcon({className, icon, style}: {className?: string, icon: BsmIconType, style?: CSSProperties}) {
const renderIcon = () => {
if(icon === "settings"){ return <SettingIcon className={className}/> }
if(icon === "trash"){ return <TrashIcon className={className}/> }
if(icon === "favorite"){ return <FavoriteIcon className={className}/> }
if(icon === "folder"){ return <FolderIcon className={className}/> }
if(icon === "bsNote"){ return <BsNoteFill className={className}/> }
if(icon === "terminal"){ return <TerminalIcon className={className}/> }
if(icon === "desktop"){ return <DesktopIcon className={className}/> }
if(icon === "oculus"){ return <OculusIcon className={className}/> }
if(icon === "add"){ return <AddIcon className={className}/> }
if(icon === "cross"){ return <CrossIcon className={className}/> }
if(icon === "fr-FR-flag"){ return <FranceIcon className={className}/> }
if(icon === "es-ES-flag"){ return <SpainIcon className={className}/> }
if(icon === "en-US-flag"){ return <UsaIcon className={className}/> }
if(icon === "en-EN-flag"){ return <UkIcon className={className}/> }
if(icon === "task"){ return <TaskIcon className={className}/> }
if(icon === "copy"){ return <CopyIcon className={className}/> }
if(icon === "steam"){ return <SteamIcon className={className}/> }
return <TrashIcon className={className}/>
if(icon === "settings"){ return <SettingIcon className={className} style={style}/> }
if(icon === "trash"){ return <TrashIcon className={className} style={style}/> }
if(icon === "favorite"){ return <FavoriteIcon className={className} style={style}/> }
if(icon === "folder"){ return <FolderIcon className={className} style={style}/> }
if(icon === "bsNote"){ return <BsNoteFill className={className} style={style}/> }
if(icon === "terminal"){ return <TerminalIcon className={className} style={style}/> }
if(icon === "desktop"){ return <DesktopIcon className={className} style={style}/> }
if(icon === "oculus"){ return <OculusIcon className={className} style={style}/> }
if(icon === "add"){ return <AddIcon className={className} style={style}/> }
if(icon === "cross"){ return <CrossIcon className={className} style={style}/> }
if(icon === "fr-FR-flag"){ return <FranceIcon className={className} style={style}/> }
if(icon === "es-ES-flag"){ return <SpainIcon className={className} style={style}/> }
if(icon === "en-US-flag"){ return <UsaIcon className={className} style={style}/> }
if(icon === "en-EN-flag"){ return <UkIcon className={className} style={style}/> }
if(icon === "task"){ return <TaskIcon className={className} style={style}/> }
if(icon === "copy"){ return <CopyIcon className={className} style={style}/> }
if(icon === "steam"){ return <SteamIcon className={className} style={style}/> }
return <TrashIcon className={className} style={style}/>
}
return (
@@ -1,6 +1,8 @@
export function FranceIcon(props: {className: string}) {
import { CSSProperties } from "react";
export function FranceIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className}>
<svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className} style={props.style}>
<defs/>
<g id="Flags" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(-324.000000, -744.000000)">
<g transform="translate(70.000000, 70.000000)" fillRule="nonzero" id="France-3">
@@ -1,6 +1,8 @@
export function SpainIcon(props: {className: string}) {
import { CSSProperties } from "react";
export function SpainIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className}>
<svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className} style={props.style}>
<defs/>
<g id="Flags" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(-662.000000, -621.000000)">
<g transform="translate(70.000000, 70.000000)" id="Spain">
@@ -1,6 +1,8 @@
export function UkIcon(props: {className: string}) {
import { CSSProperties } from "react";
export function UkIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className}>
<svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className} style={props.style}>
<defs/>
<g id="Flags" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(-493.000000, -1295.000000)">
<g transform="translate(70.000000, 70.000000)" fillRule="nonzero" id="uk">
@@ -1,6 +1,8 @@
export function UsaIcon(props: {className: string}) {
import { CSSProperties } from "react";
export function UsaIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className}>
<svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className} style={props.style}>
<defs/>
<g id="Flags" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(-831.000000, -866.000000)">
<g transform="translate(70.000000, 70.000000)" fillRule="nonzero" id="USA">
@@ -1,6 +1,8 @@
export function AddIcon(props: {className: string}) {
import { CSSProperties } from "react";
export function AddIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<path fill="currentColor" d="M17.833 32.458V22.167H7.542v-4.334h10.291V7.542h4.334v10.291h10.291v4.334H22.167v10.291Z"/>
</svg>
)
@@ -1,9 +1,10 @@
import { CSSProperties } from "react";
export function BsNoteFill({className}: {className: string}) {
export function BsNoteFill(props: {className?: string, style?: CSSProperties}) {
return (
<svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 406.4 406.4" height="406.4" width="406.4">
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 406.4 406.4" height="406.4" width="406.4">
<g>
<rect rx="69.453" height="406.4" width="406.4" fill="currentColor" fillRule="evenodd" paintOrder="fill markers stroke"/>
<path transform="translate(-70 170)" d="M135.467-109.4H406.4v33.867L270.933-7.8 135.467-75.533z" fill="white" />
@@ -1,6 +1,8 @@
export function CopyIcon(props: {className?: string}) {
import { CSSProperties } from "react";
export function CopyIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<path fill="currentColor" d="M13.625 31.167q-1.292 0-2.229-.917-.938-.917-.938-2.25V6q0-1.292.938-2.229.937-.938 2.229-.938h17q1.333 0 2.25.938.917.937.917 2.229v22q0 1.333-.917 2.25t-2.25.917Zm0-3.167h17V6h-17v22Zm-5.917 9.125q-1.333 0-2.25-.937-.916-.938-.916-2.23V11.083q0-.666.458-1.104.458-.437 1.125-.437t1.125.437q.458.438.458 1.104v22.875h17.584q.666 0 1.125.459.458.458.458 1.125 0 .666-.458 1.125-.459.458-1.125.458ZM13.625 6v22V6Z"/>
</svg>
)
@@ -1,6 +1,8 @@
export default function CrossIcon(props: {className: string}){
import { CSSProperties } from "react";
export function CrossIcon(props: {className?: string, style?: CSSProperties}){
return (
<svg className={props.className} aria-hidden="false" width="12" height="12" viewBox="0 0 12 12">
<svg className={props.className} style={props.style} aria-hidden="false" width="12" height="12" viewBox="0 0 12 12">
<polygon fill="currentColor" fillRule="evenodd" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"/>
</svg>
)
@@ -1,6 +1,8 @@
export function DesktopIcon(props: {className: string}) {
import { CSSProperties } from "react";
export function DesktopIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<path fill="currentColor" d="M13.417 38V33.75H16.875V29.875H6.708Q4.917 29.875 3.687 28.646Q2.458 27.417 2.458 25.667V7.25Q2.458 5.5 3.687 4.271Q4.917 3.042 6.708 3.042H33.375Q35.125 3.042 36.375 4.271Q37.625 5.5 37.625 7.25V25.667Q37.625 27.417 36.375 28.646Q35.125 29.875 33.375 29.875H23.167V33.75H26.667V38ZM6.708 25.667H33.375Q33.375 25.667 33.375 25.667Q33.375 25.667 33.375 25.667V7.25Q33.375 7.25 33.375 7.25Q33.375 7.25 33.375 7.25H6.708Q6.708 7.25 6.708 7.25Q6.708 7.25 6.708 7.25V25.667Q6.708 25.667 6.708 25.667Q6.708 25.667 6.708 25.667ZM6.708 25.667Q6.708 25.667 6.708 25.667Q6.708 25.667 6.708 25.667V7.25Q6.708 7.25 6.708 7.25Q6.708 7.25 6.708 7.25Q6.708 7.25 6.708 7.25Q6.708 7.25 6.708 7.25V25.667Q6.708 25.667 6.708 25.667Q6.708 25.667 6.708 25.667Z"/>
</svg>
)
@@ -1,7 +1,8 @@
import { CSSProperties } from "react";
export function FavoriteIcon(props: {className: string}) {
export function FavoriteIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg className={props.className}xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<path fill="currentColor" d="M19.958 35.875 17.583 33.708Q10.792 27.542 6.729 22.917Q2.667 18.292 2.667 13.333Q2.667 9.25 5.396 6.5Q8.125 3.75 12.208 3.75Q14.333 3.75 16.354 4.646Q18.375 5.542 19.958 7.542Q21.75 5.542 23.688 4.646Q25.625 3.75 27.75 3.75Q31.833 3.75 34.583 6.5Q37.333 9.25 37.333 13.333Q37.333 18.292 33.25 22.917Q29.167 27.542 22.375 33.708ZM20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208ZM19.958 31Q26.125 25.333 29.896 21.25Q33.667 17.167 33.667 13.333Q33.667 10.75 32 9.083Q30.333 7.417 27.75 7.417Q25.792 7.417 24.062 8.646Q22.333 9.875 21.333 12.042H18.625Q17.667 9.875 15.896 8.646Q14.125 7.417 12.208 7.417Q9.667 7.417 8 9.083Q6.333 10.75 6.333 13.333Q6.333 17.167 10.083 21.25Q13.833 25.333 19.958 31Z"/>
</svg>
)
@@ -1,7 +1,8 @@
import { CSSProperties } from "react";
export function FolderIcon(props: {className: string}) {
export function FolderIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<path fill="currentColor" d="M6.375 34Q4.875 34 3.792 32.896Q2.708 31.792 2.708 30.333V9.375Q2.708 7.875 3.792 6.792Q4.875 5.708 6.375 5.708H16.958L20.042 8.75H33.667Q35.167 8.75 36.271 9.854Q37.375 10.958 37.375 12.458V30.333Q37.375 31.792 36.271 32.896Q35.167 34 33.667 34ZM6.375 9.375V30.333Q6.375 30.333 6.375 30.333Q6.375 30.333 6.375 30.333H33.667Q33.667 30.333 33.667 30.333Q33.667 30.333 33.667 30.333V12.458Q33.667 12.458 33.667 12.458Q33.667 12.458 33.667 12.458H18.5L15.458 9.375H6.375Q6.375 9.375 6.375 9.375Q6.375 9.375 6.375 9.375ZM6.375 9.375Q6.375 9.375 6.375 9.375Q6.375 9.375 6.375 9.375V12.458Q6.375 12.458 6.375 12.458Q6.375 12.458 6.375 12.458V30.333Q6.375 30.333 6.375 30.333Q6.375 30.333 6.375 30.333Q6.375 30.333 6.375 30.333Q6.375 30.333 6.375 30.333Z"/>
</svg>
)
@@ -1,6 +1,8 @@
export function OculusIcon(props: {className?: string}) {
import { CSSProperties } from "react";
export function OculusIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="19" width="32">
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="19" width="32">
<path fill="currentColor" d="M24.182 18.599c-0.427 0.297-0.901 0.474-1.411 0.552-0.51 0.083-1.016 0.068-1.521 0.068h-10.5c-0.51 0-1.016 0.021-1.526-0.068-0.51-0.083-0.979-0.255-1.411-0.552-0.854-0.604-1.365-1.563-1.365-2.604 0-1.057 0.516-2.016 1.37-2.599 0.417-0.297 0.896-0.479 1.396-0.557 0.5-0.083 1-0.083 1.526-0.083h10.5c0.5 0 1.016-0.016 1.516 0.063s0.984 0.26 1.401 0.542c0.865 0.578 1.365 1.557 1.365 2.599 0 1.036-0.526 2-1.38 2.599zM28.411 8.526c-1.125-0.906-2.417-1.531-3.818-1.865-0.802-0.193-1.604-0.281-2.432-0.307-0.599-0.021-1.198-0.010-1.818-0.010h-8.661c-0.609 0-1.224-0.010-1.833 0.010-0.823 0.026-1.63 0.109-2.432 0.307-1.401 0.339-2.698 0.964-3.818 1.865-2.281 1.823-3.599 4.568-3.599 7.474 0 2.911 1.318 5.656 3.583 7.474 1.13 0.906 2.422 1.531 3.823 1.87 0.802 0.193 1.609 0.281 2.432 0.302 0.599 0.021 1.198 0.016 1.818 0.016h8.661c0.599 0 1.219 0.005 1.818-0.016 0.823-0.021 1.62-0.109 2.417-0.302 1.401-0.344 2.682-0.969 3.823-1.87 2.307-1.823 3.625-4.568 3.625-7.474s-1.318-5.656-3.589-7.474z"/>
</svg>
)
@@ -1,6 +1,8 @@
export function SettingIcon(props: {className?: string}) {
import { CSSProperties } from "react";
export function SettingIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<path fill="currentColor" d="M16.5 35.833 15.792 30.792Q15 30.542 14.104 30.042Q13.208 29.542 12.542 28.958L7.875 31.042L4.375 24.875L8.542 21.792Q8.458 21.375 8.438 20.896Q8.417 20.417 8.417 20Q8.417 19.625 8.438 19.146Q8.458 18.667 8.542 18.208L4.375 15.125L7.875 9L12.542 11.042Q13.25 10.458 14.125 9.979Q15 9.5 15.792 9.208L16.5 4.167H23.5L24.208 9.208Q25.042 9.542 25.875 10Q26.708 10.458 27.375 11.042L32.125 9L35.625 15.125L31.375 18.208Q31.5 18.667 31.521 19.125Q31.542 19.583 31.542 20Q31.542 20.417 31.5 20.854Q31.458 21.292 31.375 21.792L35.583 24.875L32.083 31.042L27.375 28.917Q26.667 29.542 25.854 30.042Q25.042 30.542 24.208 30.792L23.5 35.833ZM19.958 24.792Q21.958 24.792 23.375 23.396Q24.792 22 24.792 20Q24.792 18 23.375 16.604Q21.958 15.208 19.958 15.208Q17.958 15.208 16.562 16.604Q15.167 18 15.167 20Q15.167 22 16.562 23.396Q17.958 24.792 19.958 24.792Z"/>
</svg>
)
@@ -1,6 +1,8 @@
export function SteamIcon({className}: {className: string}) {
import { CSSProperties } from "react";
export function SteamIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg className={className} xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 233 233">
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 233 233">
<defs>
<linearGradient id="a" x2="50%" x1="50%" y2="100%">
<stop stopColor="#111D2E" offset="0"/>
@@ -1,6 +1,8 @@
export function TaskIcon(props: {className?: string}) {
import { CSSProperties } from "react";
export function TaskIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<path fill="currentColor" d="m18.125 25.667-3.042-3.084q-.208-.208-.458-.312-.25-.104-.521-.104t-.521.104q-.25.104-.458.354-.417.417-.417.979 0 .563.417.979l3.917 3.875q.208.25.5.375.291.125.583.125.333 0 .604-.125.271-.125.521-.375l7.5-7.5q.417-.416.417-.979 0-.562-.417-.979-.417-.417-.979-.417-.563 0-.979.417ZM9.542 36.958q-1.292 0-2.23-.937-.937-.938-.937-2.229V6.208q0-1.291.937-2.229.938-.937 2.23-.937h13.166q.667 0 1.25.25.584.25 1 .708l7.709 7.708q.458.417.708 1 .25.584.25 1.25v19.834q0 1.291-.937 2.229-.938.937-2.23.937Zm12.875-24.375V6.208H9.542v27.584h20.916V14.167H24q-.667 0-1.125-.459-.458-.458-.458-1.125ZM9.542 6.208v7.959-7.959 27.584V6.208Z"/>
</svg>
)
@@ -1,6 +1,8 @@
export function TerminalIcon(props: {className?: string}) {
import { CSSProperties } from "react";
export function TerminalIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<path fill="currentColor" d="M6.333 33.375Q5.125 33.375 4.229 32.479Q3.333 31.583 3.333 30.333V9.667Q3.333 8.417 4.229 7.521Q5.125 6.625 6.333 6.625H33.667Q34.875 6.625 35.771 7.521Q36.667 8.417 36.667 9.667V30.333Q36.667 31.583 35.771 32.479Q34.875 33.375 33.667 33.375ZM6.333 30.333H33.667Q33.667 30.333 33.667 30.333Q33.667 30.333 33.667 30.333V13.042H6.333V30.333Q6.333 30.333 6.333 30.333Q6.333 30.333 6.333 30.333ZM20.375 28V25.375H29.667V28ZM12.5 27.875 10.667 26.042 14.958 21.708 10.625 17.375 12.5 15.5 18.667 21.708Z"/>
</svg>
)
@@ -1,6 +1,8 @@
export function TrashIcon(props: {className?: string}) {
import { CSSProperties } from "react";
export function TrashIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
<path fill="currentColor" d="M10.917 35.667Q9.417 35.667 8.333 34.583Q7.25 33.5 7.25 32V9.375H5.083V5.708H14.208V3.833H25.75V5.708H34.917V9.375H32.75V32Q32.75 33.5 31.667 34.583Q30.583 35.667 29.083 35.667ZM29.083 9.375H10.917V32Q10.917 32 10.917 32Q10.917 32 10.917 32H29.083Q29.083 32 29.083 32Q29.083 32 29.083 32ZM14.833 28.708H18.083V12.625H14.833ZM21.917 28.708H25.167V12.625H21.917ZM10.917 9.375V32Q10.917 32 10.917 32Q10.917 32 10.917 32Q10.917 32 10.917 32Q10.917 32 10.917 32Z"/>
</svg>
)