diff --git a/README.md b/README.md index 5af03a4..65db76e 100644 --- a/README.md +++ b/README.md @@ -28,4 +28,8 @@ import ReactTechsLogs from 'react-techs-logos'; // Hidden label + +// Raw + + ``` diff --git a/src/App.config.ts b/src/App.config.ts index 41d20df..9298e8c 100644 --- a/src/App.config.ts +++ b/src/App.config.ts @@ -46,5 +46,10 @@ import ReactTechsLogs from 'react-techs-logos' ]} />`, }, + { + name: 'raw', + language: 'tsx', + content: ``, + }, ], } diff --git a/src/assets/techs/amd.svg b/src/assets/techs/amd.svg index 060c318..7dcbe72 100644 --- a/src/assets/techs/amd.svg +++ b/src/assets/techs/amd.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/techs/android.svg b/src/assets/techs/android.svg index 14b7d5d..aaaf0d9 100755 --- a/src/assets/techs/android.svg +++ b/src/assets/techs/android.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/techs/androidstudio.svg b/src/assets/techs/androidstudio.svg index 27f37c3..8db1195 100644 --- a/src/assets/techs/androidstudio.svg +++ b/src/assets/techs/androidstudio.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/techs/angular.svg b/src/assets/techs/angular.svg index 25e0060..8216fd5 100755 --- a/src/assets/techs/angular.svg +++ b/src/assets/techs/angular.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/techs/ansible.svg b/src/assets/techs/ansible.svg index b46081a..77c5499 100644 --- a/src/assets/techs/ansible.svg +++ b/src/assets/techs/ansible.svg @@ -1 +1 @@ - + diff --git a/src/assets/techs/apache.svg b/src/assets/techs/apache.svg index 3789fce..54df971 100644 --- a/src/assets/techs/apache.svg +++ b/src/assets/techs/apache.svg @@ -1,4 +1,4 @@ - diff --git a/src/assets/techs/apple.svg b/src/assets/techs/apple.svg index 740e83a..a451b04 100755 --- a/src/assets/techs/apple.svg +++ b/src/assets/techs/apple.svg @@ -1,3 +1,3 @@ - + - \ No newline at end of file + diff --git a/src/assets/techs/appstore.svg b/src/assets/techs/appstore.svg index 2aed58e..6635ba8 100644 --- a/src/assets/techs/appstore.svg +++ b/src/assets/techs/appstore.svg @@ -1 +1 @@ - + diff --git a/src/assets/techs/archlinux.svg b/src/assets/techs/archlinux.svg index f1e6905..6b48a83 100644 --- a/src/assets/techs/archlinux.svg +++ b/src/assets/techs/archlinux.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/techs/astro.svg b/src/assets/techs/astro.svg index ecfd527..6460a95 100644 --- a/src/assets/techs/astro.svg +++ b/src/assets/techs/astro.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/techs/aws.svg b/src/assets/techs/aws.svg index 3c698fe..0042f4b 100644 --- a/src/assets/techs/aws.svg +++ b/src/assets/techs/aws.svg @@ -1,4 +1,4 @@ - + - \ No newline at end of file + diff --git a/src/assets/techs/rust.svg b/src/assets/techs/rust.svg index 1f6debd..cf9b476 100644 --- a/src/assets/techs/rust.svg +++ b/src/assets/techs/rust.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/techs/safari.svg b/src/assets/techs/safari.svg index 007db2e..7f35ee6 100644 --- a/src/assets/techs/safari.svg +++ b/src/assets/techs/safari.svg @@ -1,5 +1,5 @@ - + @@ -151,4 +151,4 @@ - \ No newline at end of file + diff --git a/src/assets/techs/sass.svg b/src/assets/techs/sass.svg index 334401a..ed1609e 100755 --- a/src/assets/techs/sass.svg +++ b/src/assets/techs/sass.svg @@ -1 +1 @@ - + diff --git a/src/assets/techs/shopify.svg b/src/assets/techs/shopify.svg index 49b8f0e..7f622bb 100644 --- a/src/assets/techs/shopify.svg +++ b/src/assets/techs/shopify.svg @@ -1,4 +1,4 @@ - + Shopify diff --git a/src/assets/techs/slackware.svg b/src/assets/techs/slackware.svg index bacf13c..4319ae2 100644 --- a/src/assets/techs/slackware.svg +++ b/src/assets/techs/slackware.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/techs/snapdragon.svg b/src/assets/techs/snapdragon.svg index c8fb5ac..7942278 100644 --- a/src/assets/techs/snapdragon.svg +++ b/src/assets/techs/snapdragon.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/techs/soundcloud.svg b/src/assets/techs/soundcloud.svg index 9893e55..d32af93 100644 --- a/src/assets/techs/soundcloud.svg +++ b/src/assets/techs/soundcloud.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/techs/spacex.svg b/src/assets/techs/spacex.svg index 95cdc78..209bd74 100644 --- a/src/assets/techs/spacex.svg +++ b/src/assets/techs/spacex.svg @@ -1,4 +1,4 @@ - - \ No newline at end of file + diff --git a/src/assets/techs/tensorflow.svg b/src/assets/techs/tensorflow.svg index 100e86d..fac8c6e 100644 --- a/src/assets/techs/tensorflow.svg +++ b/src/assets/techs/tensorflow.svg @@ -1,4 +1,4 @@ - diff --git a/src/assets/techs/tiktok.svg b/src/assets/techs/tiktok.svg index 8cb4a6d..e2b1440 100644 --- a/src/assets/techs/tiktok.svg +++ b/src/assets/techs/tiktok.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/techs/tomcat.svg b/src/assets/techs/tomcat.svg index 4545170..3a0dd23 100644 --- a/src/assets/techs/tomcat.svg +++ b/src/assets/techs/tomcat.svg @@ -1,4 +1,4 @@ - + + diff --git a/src/assets/techs/tumblr.svg b/src/assets/techs/tumblr.svg index 7126848..ac935bd 100644 --- a/src/assets/techs/tumblr.svg +++ b/src/assets/techs/tumblr.svg @@ -1,4 +1,4 @@ - + - \ No newline at end of file + diff --git a/src/assets/techs/turbo.svg b/src/assets/techs/turbo.svg index 0730b1a..e91e492 100644 --- a/src/assets/techs/turbo.svg +++ b/src/assets/techs/turbo.svg @@ -1,4 +1,4 @@ - + + diff --git a/src/assets/techs/ubuntu.svg b/src/assets/techs/ubuntu.svg index d594f9c..d278e28 100644 --- a/src/assets/techs/ubuntu.svg +++ b/src/assets/techs/ubuntu.svg @@ -1,4 +1,4 @@ - diff --git a/src/assets/techs/vercel.svg b/src/assets/techs/vercel.svg index 7cbb258..0d9bc9c 100644 --- a/src/assets/techs/vercel.svg +++ b/src/assets/techs/vercel.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/techs/visualcode.svg b/src/assets/techs/visualcode.svg index 07b1de0..22a1b4d 100644 --- a/src/assets/techs/visualcode.svg +++ b/src/assets/techs/visualcode.svg @@ -1,5 +1,5 @@ - + @@ -21,4 +21,4 @@ - \ No newline at end of file + diff --git a/src/assets/techs/vite.svg b/src/assets/techs/vite.svg index fc3faca..b111a1b 100755 --- a/src/assets/techs/vite.svg +++ b/src/assets/techs/vite.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/techs/vitest.svg b/src/assets/techs/vitest.svg index e00b1b9..4939deb 100755 --- a/src/assets/techs/vitest.svg +++ b/src/assets/techs/vitest.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/techs/vk.svg b/src/assets/techs/vk.svg index 0ea3653..93a2da6 100644 --- a/src/assets/techs/vk.svg +++ b/src/assets/techs/vk.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/techs/vue.svg b/src/assets/techs/vue.svg index 41b0863..54a66a8 100755 --- a/src/assets/techs/vue.svg +++ b/src/assets/techs/vue.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/techs/webpack.svg b/src/assets/techs/webpack.svg index 47d5453..56a71c0 100755 --- a/src/assets/techs/webpack.svg +++ b/src/assets/techs/webpack.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/techs/whatsapp.svg b/src/assets/techs/whatsapp.svg index 7739679..828122c 100644 --- a/src/assets/techs/whatsapp.svg +++ b/src/assets/techs/whatsapp.svg @@ -1,5 +1,5 @@ - + @@ -10,4 +10,4 @@ - \ No newline at end of file + diff --git a/src/assets/techs/wordpress.svg b/src/assets/techs/wordpress.svg index 8ceb73a..83a3935 100644 --- a/src/assets/techs/wordpress.svg +++ b/src/assets/techs/wordpress.svg @@ -1,4 +1,4 @@ - + - \ No newline at end of file + diff --git a/src/assets/techs/x.svg b/src/assets/techs/x.svg index 1b55ea7..0cc28bc 100644 --- a/src/assets/techs/x.svg +++ b/src/assets/techs/x.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/techs/xcode.svg b/src/assets/techs/xcode.svg index 44dcd0e..7713f65 100644 --- a/src/assets/techs/xcode.svg +++ b/src/assets/techs/xcode.svg @@ -1,5 +1,5 @@ - + @@ -10,4 +10,4 @@ - \ No newline at end of file + diff --git a/src/assets/techs/yandex.svg b/src/assets/techs/yandex.svg index a40e2d0..b8118ff 100644 --- a/src/assets/techs/yandex.svg +++ b/src/assets/techs/yandex.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/techs/youtube.svg b/src/assets/techs/youtube.svg index f6cd180..14807c4 100644 --- a/src/assets/techs/youtube.svg +++ b/src/assets/techs/youtube.svg @@ -1,2 +1,2 @@ - \ No newline at end of file + diff --git a/src/components/ReactTechsLogos/index.tsx b/src/components/ReactTechsLogos/index.tsx index bc1aba9..02ab5d1 100644 --- a/src/components/ReactTechsLogos/index.tsx +++ b/src/components/ReactTechsLogos/index.tsx @@ -31,16 +31,22 @@ function ReactTechsLogos(props: any) { return ( <> - {props.name && getTech(props.name) && !props.list ? ( + {props.raw ? ( + props.name && getTech(props.name) && !props.list ? ( + getTech(props.name)?.icon + ) : ( + listTechs.map((tech) => tech.icon) + ) + ) : props.name && getTech(props.name) && !props.list ? (
- {getTech(props.name).icon} + {getTech(props.name)?.icon}
- {getTech(props.name).name} + {getTech(props.name)?.name}
) : ( @@ -52,11 +58,11 @@ function ReactTechsLogos(props: any) { ? "techs-container-hiddenLogos" : "techs-container" } - className={`techs ${props.className ? props.className : ""}`} + className={`techs ${props.className || ""}`} > {listTechs.map((tech) => (
{tech.icon} diff --git a/src/components/ReactTechsLogos/style.scss b/src/components/ReactTechsLogos/style.scss index 6b4817b..13606a9 100644 --- a/src/components/ReactTechsLogos/style.scss +++ b/src/components/ReactTechsLogos/style.scss @@ -21,7 +21,7 @@ figure.tech-container { align-items: center; justify-content: center; flex-direction: column; - transition: .3s all; + transition: 0.3s all; &:hover { background: var(--vtl-background); border-color: var(--vtl-background); @@ -29,16 +29,21 @@ figure.tech-container { } svg { height: 50px; - margin-bottom: .2rem; + margin-bottom: 0.2rem; } } +.tech-icon { + width: 50px; + height: 50px; +} + figure { position: relative; text-align: center; - margin: .2rem; + margin: 0.2rem; figcaption { - font-size: .7rem; + font-size: 0.7rem; &.tooltip { position: absolute; bottom: 2%; @@ -48,7 +53,7 @@ figure { border-radius: 5px; pointer-events: none; opacity: 0; - transition: .3s all; + transition: 0.3s all; color: #fff; } } @@ -61,45 +66,61 @@ figure { } body { - --vtl-background: rgba(0,0,0, .05); + --vtl-background: rgba(0, 0, 0, 0.05); --vtl-background-tooltip: #444; - --vtl-shadow-tooltip: rgba(0,0,0,.2); + --vtl-shadow-tooltip: rgba(0, 0, 0, 0.2); --vtl-text: #000; --vtl-background-svg: #000; --vtl-background-svg-invert: #fff; - --vtl-background-gradient: linear-gradient(228deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 60%); + --vtl-background-gradient: linear-gradient( + 228deg, + rgba(238, 238, 238, 1) 0%, + rgba(255, 255, 255, 1) 60% + ); } body.darkmode { - --vtl-background: rgba(0,0,0, .5); + --vtl-background: rgba(0, 0, 0, 0.5); --vtl-background-tooltip: #444; - --vtl-shadow-tooltip: rgba(0,0,0,.2); + --vtl-shadow-tooltip: rgba(0, 0, 0, 0.2); --vtl-text: #fff; --vtl-background-svg: #fff; --vtl-background-svg-invert: #000; - --vtl-background-gradient: linear-gradient(228deg, rgb(24, 24, 24) 0%, rgb(38, 38, 38) 60%); + --vtl-background-gradient: linear-gradient( + 228deg, + rgb(24, 24, 24) 0%, + rgb(38, 38, 38) 60% + ); } @media (prefers-color-scheme: light) { :root { - --vtl-background: rgba(0,0,0, .05); + --vtl-background: rgba(0, 0, 0, 0.05); --vtl-background-tooltip: #444; - --vtl-shadow-tooltip: rgba(0,0,0,.2); + --vtl-shadow-tooltip: rgba(0, 0, 0, 0.2); --vtl-text: #000; --vtl-background-svg: #000; --vtl-background-svg-invert: #fff; - --vtl-background-gradient: linear-gradient(228deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 60%); + --vtl-background-gradient: linear-gradient( + 228deg, + rgba(238, 238, 238, 1) 0%, + rgba(255, 255, 255, 1) 60% + ); } } @media (prefers-color-scheme: dark) { :root { - --vtl-background: rgba(0,0,0, .5); + --vtl-background: rgba(0, 0, 0, 0.5); --vtl-background-tooltip: #444; - --vtl-shadow-tooltip: rgba(0,0,0,.2); + --vtl-shadow-tooltip: rgba(0, 0, 0, 0.2); --vtl-text: #fff; --vtl-background-svg: #fff; --vtl-background-svg-invert: #000; - --vtl-background-gradient: linear-gradient(228deg, rgb(24, 24, 24) 0%, rgb(38, 38, 38) 60%); + --vtl-background-gradient: linear-gradient( + 228deg, + rgb(24, 24, 24) 0%, + rgb(38, 38, 38) 60% + ); } }