I am i working on Reactjs/nextjs and right no in my page there is video with audio "start/pause button",Component is working fine if i am coming first time in site/page, but whenever i click on another menu/page and then come back to "home page" then its not working, Where i am wrong ?
Here is my code in index.js file
export default function Home() {
const screenWidth = useWindowSize();
const scrollHeight = useScrollHeight();
const CustomAudioPlayer = dynamic(
() => import("../components/CustomAudioPlayer"),
{ ssr: false }
);
}
And here is my code inside "components/index.js"
function handleAudio() {
if (ref.current.paused) {
setMuted(false);
ref.current.play();
} else {
setMuted(true);
ref.current.pause();
}
}
<buton onClick={handleAudio} className="customAudioPlayerButton">
{!muted ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
className="bi bi-volume-down"
viewBox="0 0 16 16"
>
<path d="M9 4a.5.5 0 0 0-.812-.39L5.825 5.5H3.5A.5.5 0 0 0 3 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 9 12V4zM6.312 6.39 8 5.04v5.92L6.312 9.61A.5.5 0 0 0 6 9.5H4v-3h2a.5.5 0 0 0 .312-.11zM12.025 8a4.486 4.486 0 0 1-1.318 3.182L10 10.475A3.489 3.489 0 0 0 11.025 8 3.49 3.49 0 0 0 10 5.525l.707-.707A4.486 4.486 0 0 1 12.025 8z" />
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
className="bi bi-volume-mute"
viewBox="0 0 16 16"
>
<path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04 4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z" />
</svg>
)}
</buton>
Related
I want to be able to change the value of the button from "Submit" to "Submitted" when ajax succeeds.
success: function () {
Swal.fire({
title: "Message recieved!",
text: "We will get back to you soon.",
icon: "success",
});
$("#contactFormButton").click(function(){
// disabling the button
$(this).prop("disabled",true);
// Adding a mail submitted icon
$(this).html(
'Submitted! <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-check-fill" viewBox="0 0 16 16"><path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.026A2 2 0 0 0 2 14h6.256A4.493 4.493 0 0 1 8 12.5a4.49 4.49 0 0 1 1.606-3.446l-.367-.225L8 9.586l-1.239-.757ZM16 4.697v4.974A4.491 4.491 0 0 0 12.5 8a4.49 4.49 0 0 0-1.965.45l-.338-.207L16 4.697Z"/><path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-1.993-1.679a.5.5 0 0 0-.686.172l-1.17 1.95-.547-.547a.5.5 0 0 0-.708.708l.774.773a.75.75 0 0 0 1.174-.144l1.335-2.226a.5.5 0 0 0-.172-.686Z"/></svg>'
);
});
}
This works np. But I want it to work when the button is not clicked...In other words the button value "submit" should get changed to "Submitted" when ajax succeeds without the need to click the button again. Any help would be greatly appreciated.Thank you
For anyone wondering,
I couldn't get $('#ID').html('Submitted') to work.
Instead the following worked np:
success: function () {
Swal.fire({
title: "Message recieved!",
text: "We will get back to you soon.",
icon: "success",
});
//change button text to submitted
$(document.getElementById('contactFormButton')).html('Submitted! <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-check-fill" viewBox="0 0 16 16"><path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.026A2 2 0 0 0 2 14h6.256A4.493 4.493 0 0 1 8 12.5a4.49 4.49 0 0 1 1.606-3.446l-.367-.225L8 9.586l-1.239-.757ZM16 4.697v4.974A4.491 4.491 0 0 0 12.5 8a4.49 4.49 0 0 0-1.965.45l-.338-.207L16 4.697Z"/><path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-1.993-1.679a.5.5 0 0 0-.686.172l-1.17 1.95-.547-.547a.5.5 0 0 0-.708.708l.774.773a.75.75 0 0 0 1.174-.144l1.335-2.226a.5.5 0 0 0-.172-.686Z"/></svg>');
//disable button
$(document.getElementById('contactFormButton')).prop('disabled',true);
},
I have 5 links with tooltip hovers on each one except the last one. The reason the last one is different is because I'm using the tooltip to show the user their data was copied after the link was clicked. I would still like to have a hover for that link like the other ones that tells the user what the button does before they click it. I've included a sample below. I'd appreciate it if someone could help me figure out how to add the hover tool tip on the last link as well as having it still say "copied" after it was clicked.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({trigger: 'click',placement: 'bottom'});
});
$(document).ready(function(){
$('[card-toggle="tooltip"]').tooltip();
});
function hideTooltip() {
setTimeout(function() {
$('[data-toggle="tooltip"]').tooltip('hide');
}, 1000);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div style="padding:50px;">
<a href="#" card-toggle="tooltip" data-placement="top" title="Edit link data" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
</svg>
</a>
<a href="#" card-toggle="tooltip" data-placement="top" title="View link stats" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart-fill" viewBox="0 0 16 16">
<path d="M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z" />
</svg>
</a>
<a href="#" card-toggle="tooltip" data-placement="top" title="Visit link" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right-square-fill" viewBox="0 0 16 16">
<path d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM5.904 10.803L10 6.707v2.768a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H6.525a.5.5 0 1 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 .707.707z" />
</svg>
</a>
<a href="#" card-toggle="tooltip" data-placement="top" title="View link" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16">
<path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1z" />
</svg>
</a>
<a href="#" id="#hi" data-toggle="tooltip" title="Copied!" data-placement="bottom" data-clipboard-text="{{base_url}}{{url.short_url}}" onclick="hideTooltip()" onmouseover="$('#hi').tooltip({title:'Copy'})" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16">
<path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z" />
</svg>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
$(document).ready(function(){
$('[card-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').tooltip({title: function () { return this.dataset.title }});
});
function update(title) {
$('[data-toggle="tooltip"]').tooltip('hide');
$('[data-toggle="tooltip"]').attr('data-title', title);
$('[data-toggle="tooltip"]').tooltip('show');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div style="padding:50px;">
<a href="#" card-toggle="tooltip" data-placement="top" title="Edit link data" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
</svg>
</a>
<a href="#" card-toggle="tooltip" data-placement="top" title="View link stats" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart-fill" viewBox="0 0 16 16">
<path d="M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z" />
</svg>
</a>
<a href="#" card-toggle="tooltip" data-placement="top" title="Visit link" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right-square-fill" viewBox="0 0 16 16">
<path d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM5.904 10.803L10 6.707v2.768a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H6.525a.5.5 0 1 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 .707.707z" />
</svg>
</a>
<a href="#" card-toggle="tooltip" data-placement="top" title="View link" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16">
<path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1z" />
</svg>
</a>
<a href="#" id="#hi" data-toggle="tooltip" data-title="Copy" data-placement="bottom" data-clipboard-text="{{base_url}}{{url.short_url}}" onclick="update('Coppied!')" onpointerenter="update('Copy')" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16">
<path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z" />
</svg>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I'm looking to modify the color of an SVG. I'm currently attempting to modify the file directly however with no luck. I'm using react and here is the code for the SVG I'm trying to edit.
import * as React from "react";
const ReduceCosts: React.FC = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg
width="55px"
height="65px"
viewBox="0 0 53 45"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<title>{"Reduce Costs Icon#1x"}</title>
<defs>
<filter id="prefix__a">
<feColorMatrix
in="SourceGraphic"
values="0 0 0 0 0.870588 0 0 0 0 0.172549 0 0 0 0 0.058824 0 0 0 1.000000 0"
/>
</filter>
</defs>
<g
transform="translate(1 -4)"
filter="url(#prefix__a)"
fill="none"
fillRule="evenodd"
>
<g stroke="#000" fill="#000">
<path d="M43.822 28.67c-.3-.193-.58-.413-.84-.656-.93-.893-1.36-1.932-1.092-2.657.204-.562.525-.866.887-.903h.079c.473.035.9.3 1.139.709.62 1.06.457 2.152-.173 3.522v-.015zm4.625 1.05a.93.93 0 00-1.218-.494h0a3.001 3.001 0 01-1.68.157c.73-1.616 1.097-3.375.047-5.15a3.23 3.23 0 00-2.992-1.612 2.957 2.957 0 00-2.463 2.1c-.525 1.44.069 3.22 1.575 4.641a7.47 7.47 0 001.229.946 2.723 2.723 0 01-1.512 1.05c-.714.152-1.528-.1-2.415-.751a14.01 14.01 0 00-4.898-7.518.929.929 0 10-1.176 1.433c2.913 2.43 4.536 5.623 4.536 9.015 0 3.759-2.032 7.312-5.57 9.759a.92.92 0 00-.384.945l1.14 5.712h-5.077a.4.4 0 01-.336-.23l-.64-3.061a.924.924 0 00-1.093-.714c-2.814.51-5.696.51-8.51 0a.924.924 0 00-1.092.714l-.64 3.013a.397.397 0 01-.337.23H9.87l1.134-5.276a.934.934 0 00-.635-1.086 7.26 7.26 0 01-4.515-4.347.925.925 0 00-.856-.578h-2.51a3.465 3.465 0 01-.63-.036v-5.864c0-.756.394-.756.588-.756h1.959a.93.93 0 00.908-.725 11.547 11.547 0 012.662-5.124.941.941 0 00.23-.688c-.178-2.247-1.018-3.633-1.91-5.103l-.231-.383c2.966-.126 5.376.525 7.014 1.88a.93.93 0 00.934.152 18.388 18.388 0 013.638-.96.93.93 0 10-.304-1.833 21.01 21.01 0 00-3.491.892c-1.717-1.233-4.641-2.41-9.45-1.848a.934.934 0 00-.714 1.36c.336.64.672 1.187.997 1.722.777 1.286 1.407 2.32 1.607 3.911A13.284 13.284 0 003.67 30.12H2.446C.982 30.119 0 31.169 0 32.718v5.827c0 1.974 1.869 1.974 2.488 1.974h1.917a9.087 9.087 0 004.61 4.568L8.01 49.748c-.108.5.016 1.02.336 1.418.36.428.891.67 1.45.661l5.144-.03a2.205 2.205 0 002.142-1.697l.447-2.157c2.464.35 4.965.35 7.428 0l.452 2.142a2.221 2.221 0 002.147 1.695l5.14.032a1.842 1.842 0 001.438-.651 1.7 1.7 0 00.347-1.413l-1.05-5.28c3.77-2.783 5.901-6.731 5.901-10.931v-.599a4.163 4.163 0 002.488.257 4.663 4.663 0 002.846-2.1 4.89 4.89 0 003.292-.147.935.935 0 00.489-1.228h-.001z" />
<path d="M27.752 6.384a6.872 6.872 0 11-6.873 6.872v-.005a6.878 6.878 0 016.873-6.873v.006zm0 15.603a8.73 8.73 0 10-8.731-8.736 8.741 8.741 0 008.73 8.736h0z" />
</g>
</g>
</svg>
);
};
export default React.memo(ReduceCosts);
I understand that I should be changing the fill and/or stroke value. However I can't manage to adjust the color of this thing which is showing orange, although the stroke and fill values are currently #000. Thanks.
The SVG you're using uses feColorMatrix which changes the hue of the color.
I removed that for you below and added the orange into the stroke and fill color.
<svg
width="55px"
height="65px"
viewBox="0 0 53 45"
xmlns="http://www.w3.org/2000/svg"
>
<title>Something</title>
<g
transform="translate(1 -4)"
fill="none"
fillRule="evenodd"
>
<g stroke="#F07345" fill="#F07345">
<path d="M43.822 28.67c-.3-.193-.58-.413-.84-.656-.93-.893-1.36-1.932-1.092-2.657.204-.562.525-.866.887-.903h.079c.473.035.9.3 1.139.709.62 1.06.457 2.152-.173 3.522v-.015zm4.625 1.05a.93.93 0 00-1.218-.494h0a3.001 3.001 0 01-1.68.157c.73-1.616 1.097-3.375.047-5.15a3.23 3.23 0 00-2.992-1.612 2.957 2.957 0 00-2.463 2.1c-.525 1.44.069 3.22 1.575 4.641a7.47 7.47 0 001.229.946 2.723 2.723 0 01-1.512 1.05c-.714.152-1.528-.1-2.415-.751a14.01 14.01 0 00-4.898-7.518.929.929 0 10-1.176 1.433c2.913 2.43 4.536 5.623 4.536 9.015 0 3.759-2.032 7.312-5.57 9.759a.92.92 0 00-.384.945l1.14 5.712h-5.077a.4.4 0 01-.336-.23l-.64-3.061a.924.924 0 00-1.093-.714c-2.814.51-5.696.51-8.51 0a.924.924 0 00-1.092.714l-.64 3.013a.397.397 0 01-.337.23H9.87l1.134-5.276a.934.934 0 00-.635-1.086 7.26 7.26 0 01-4.515-4.347.925.925 0 00-.856-.578h-2.51a3.465 3.465 0 01-.63-.036v-5.864c0-.756.394-.756.588-.756h1.959a.93.93 0 00.908-.725 11.547 11.547 0 012.662-5.124.941.941 0 00.23-.688c-.178-2.247-1.018-3.633-1.91-5.103l-.231-.383c2.966-.126 5.376.525 7.014 1.88a.93.93 0 00.934.152 18.388 18.388 0 013.638-.96.93.93 0 10-.304-1.833 21.01 21.01 0 00-3.491.892c-1.717-1.233-4.641-2.41-9.45-1.848a.934.934 0 00-.714 1.36c.336.64.672 1.187.997 1.722.777 1.286 1.407 2.32 1.607 3.911A13.284 13.284 0 003.67 30.12H2.446C.982 30.119 0 31.169 0 32.718v5.827c0 1.974 1.869 1.974 2.488 1.974h1.917a9.087 9.087 0 004.61 4.568L8.01 49.748c-.108.5.016 1.02.336 1.418.36.428.891.67 1.45.661l5.144-.03a2.205 2.205 0 002.142-1.697l.447-2.157c2.464.35 4.965.35 7.428 0l.452 2.142a2.221 2.221 0 002.147 1.695l5.14.032a1.842 1.842 0 001.438-.651 1.7 1.7 0 00.347-1.413l-1.05-5.28c3.77-2.783 5.901-6.731 5.901-10.931v-.599a4.163 4.163 0 002.488.257 4.663 4.663 0 002.846-2.1 4.89 4.89 0 003.292-.147.935.935 0 00.489-1.228h-.001z" />
<path d="M27.752 6.384a6.872 6.872 0 11-6.873 6.872v-.005a6.878 6.878 0 016.873-6.873v.006zm0 15.603a8.73 8.73 0 10-8.731-8.736 8.741 8.741 0 008.73 8.736h0z" />
</g>
</g>
</svg>
Now you can use that to change the color more direclty
<svg
width="55px"
height="65px"
viewBox="0 0 53 45"
xmlns="http://www.w3.org/2000/svg"
>
<title>Something</title>
<g
transform="translate(1 -4)"
fill="none"
fillRule="evenodd"
>
<g stroke="blue" fill="blue">
<path d="M43.822 28.67c-.3-.193-.58-.413-.84-.656-.93-.893-1.36-1.932-1.092-2.657.204-.562.525-.866.887-.903h.079c.473.035.9.3 1.139.709.62 1.06.457 2.152-.173 3.522v-.015zm4.625 1.05a.93.93 0 00-1.218-.494h0a3.001 3.001 0 01-1.68.157c.73-1.616 1.097-3.375.047-5.15a3.23 3.23 0 00-2.992-1.612 2.957 2.957 0 00-2.463 2.1c-.525 1.44.069 3.22 1.575 4.641a7.47 7.47 0 001.229.946 2.723 2.723 0 01-1.512 1.05c-.714.152-1.528-.1-2.415-.751a14.01 14.01 0 00-4.898-7.518.929.929 0 10-1.176 1.433c2.913 2.43 4.536 5.623 4.536 9.015 0 3.759-2.032 7.312-5.57 9.759a.92.92 0 00-.384.945l1.14 5.712h-5.077a.4.4 0 01-.336-.23l-.64-3.061a.924.924 0 00-1.093-.714c-2.814.51-5.696.51-8.51 0a.924.924 0 00-1.092.714l-.64 3.013a.397.397 0 01-.337.23H9.87l1.134-5.276a.934.934 0 00-.635-1.086 7.26 7.26 0 01-4.515-4.347.925.925 0 00-.856-.578h-2.51a3.465 3.465 0 01-.63-.036v-5.864c0-.756.394-.756.588-.756h1.959a.93.93 0 00.908-.725 11.547 11.547 0 012.662-5.124.941.941 0 00.23-.688c-.178-2.247-1.018-3.633-1.91-5.103l-.231-.383c2.966-.126 5.376.525 7.014 1.88a.93.93 0 00.934.152 18.388 18.388 0 013.638-.96.93.93 0 10-.304-1.833 21.01 21.01 0 00-3.491.892c-1.717-1.233-4.641-2.41-9.45-1.848a.934.934 0 00-.714 1.36c.336.64.672 1.187.997 1.722.777 1.286 1.407 2.32 1.607 3.911A13.284 13.284 0 003.67 30.12H2.446C.982 30.119 0 31.169 0 32.718v5.827c0 1.974 1.869 1.974 2.488 1.974h1.917a9.087 9.087 0 004.61 4.568L8.01 49.748c-.108.5.016 1.02.336 1.418.36.428.891.67 1.45.661l5.144-.03a2.205 2.205 0 002.142-1.697l.447-2.157c2.464.35 4.965.35 7.428 0l.452 2.142a2.221 2.221 0 002.147 1.695l5.14.032a1.842 1.842 0 001.438-.651 1.7 1.7 0 00.347-1.413l-1.05-5.28c3.77-2.783 5.901-6.731 5.901-10.931v-.599a4.163 4.163 0 002.488.257 4.663 4.663 0 002.846-2.1 4.89 4.89 0 003.292-.147.935.935 0 00.489-1.228h-.001z" />
<path d="M27.752 6.384a6.872 6.872 0 11-6.873 6.872v-.005a6.878 6.878 0 016.873-6.873v.006zm0 15.603a8.73 8.73 0 10-8.731-8.736 8.741 8.741 0 008.73 8.736h0z" />
</g>
</g>
</svg>
So your react component would look like this:
import * as React from "react";
const ReduceCosts: React.FC = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg
width="55px"
height="65px"
viewBox="0 0 53 45"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<title>{"Reduce Costs Icon#1x"}</title>
<g
transform="translate(1 -4)"
fill="none"
fillRule="evenodd"
>
<g stroke="#000" fill="#000">
<path d="M43.822 28.67c-.3-.193-.58-.413-.84-.656-.93-.893-1.36-1.932-1.092-2.657.204-.562.525-.866.887-.903h.079c.473.035.9.3 1.139.709.62 1.06.457 2.152-.173 3.522v-.015zm4.625 1.05a.93.93 0 00-1.218-.494h0a3.001 3.001 0 01-1.68.157c.73-1.616 1.097-3.375.047-5.15a3.23 3.23 0 00-2.992-1.612 2.957 2.957 0 00-2.463 2.1c-.525 1.44.069 3.22 1.575 4.641a7.47 7.47 0 001.229.946 2.723 2.723 0 01-1.512 1.05c-.714.152-1.528-.1-2.415-.751a14.01 14.01 0 00-4.898-7.518.929.929 0 10-1.176 1.433c2.913 2.43 4.536 5.623 4.536 9.015 0 3.759-2.032 7.312-5.57 9.759a.92.92 0 00-.384.945l1.14 5.712h-5.077a.4.4 0 01-.336-.23l-.64-3.061a.924.924 0 00-1.093-.714c-2.814.51-5.696.51-8.51 0a.924.924 0 00-1.092.714l-.64 3.013a.397.397 0 01-.337.23H9.87l1.134-5.276a.934.934 0 00-.635-1.086 7.26 7.26 0 01-4.515-4.347.925.925 0 00-.856-.578h-2.51a3.465 3.465 0 01-.63-.036v-5.864c0-.756.394-.756.588-.756h1.959a.93.93 0 00.908-.725 11.547 11.547 0 012.662-5.124.941.941 0 00.23-.688c-.178-2.247-1.018-3.633-1.91-5.103l-.231-.383c2.966-.126 5.376.525 7.014 1.88a.93.93 0 00.934.152 18.388 18.388 0 013.638-.96.93.93 0 10-.304-1.833 21.01 21.01 0 00-3.491.892c-1.717-1.233-4.641-2.41-9.45-1.848a.934.934 0 00-.714 1.36c.336.64.672 1.187.997 1.722.777 1.286 1.407 2.32 1.607 3.911A13.284 13.284 0 003.67 30.12H2.446C.982 30.119 0 31.169 0 32.718v5.827c0 1.974 1.869 1.974 2.488 1.974h1.917a9.087 9.087 0 004.61 4.568L8.01 49.748c-.108.5.016 1.02.336 1.418.36.428.891.67 1.45.661l5.144-.03a2.205 2.205 0 002.142-1.697l.447-2.157c2.464.35 4.965.35 7.428 0l.452 2.142a2.221 2.221 0 002.147 1.695l5.14.032a1.842 1.842 0 001.438-.651 1.7 1.7 0 00.347-1.413l-1.05-5.28c3.77-2.783 5.901-6.731 5.901-10.931v-.599a4.163 4.163 0 002.488.257 4.663 4.663 0 002.846-2.1 4.89 4.89 0 003.292-.147.935.935 0 00.489-1.228h-.001z" />
<path d="M27.752 6.384a6.872 6.872 0 11-6.873 6.872v-.005a6.878 6.878 0 016.873-6.873v.006zm0 15.603a8.73 8.73 0 10-8.731-8.736 8.741 8.741 0 008.73 8.736h0z" />
</g>
</g>
</svg>
);
};
export default React.memo(ReduceCosts);
When I put an icon inside a button, the name and the value property of the button becomes undefined.
listSpendings() {
var mapped = this.props.money.transes.slice(0).reverse().map(trans => {
return (
<div key={trans._id} className="smoothbackground z-depth-3">
<li key={trans._id} className="collection-item" style={{
textDecoration: trans.crossedOut ? "line-through" : "none"
}}> {trans.who} spent ${trans.amount} on {trans.info}
<button onClick={this.handleClickChange} type="submit" className="btn-floating btn-small waves-effect waves-light align-right-button" name="CrossOut" value={trans._id}>
X
</button>
</li>
</div>
)
})
return mapped;
}
This function works without any issues. This is the handleClickChange,
handleClickChange = event => {this.setState({ name: event.target.name, transId: event.target.value}); console.log(event.target.name);}
console.log(event.target.name); logs CrossOut like it should. Because that's the button's name.
However, when I put <i class="material-icons">delete</i> instead of the X you see in the code, console.log(event.target.name); logs undefined.
<i class="material-icons">delete</i> is a delete icon and it properly gets displayed on the screen, inside the button. In any case, I've also tried another icon. This is the trash icon from bootstrap.
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-trash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg>
This one also gets displayed but the console.log(event.target.name); also logs undefined.
Any ideas?
svg element does not have name attribute.
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-trash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg>
If you use console.log(event.target.fill), you will get currentColor. Because, svg element contains fill attribute. In case of console.log(event.target.hello), you will get undefined. That's because, there is no hello attribute in this HTML element currently.
Edit
Please, check if there is any defined eventlistener for svg elements.
I have an array with SVG (which is sanitized before pushing into array) and its fill color code.
And I'm rendering these SVGs to html using [innerHTML] tag and trying to apply its fill color coming from the array it self
NOTE: I have added id='svg-icon' inside all the svgs
like
<svg id='svg-icon' xmlns='http://www.w3.org/2000/svg' width='36.342' height='34.955' viewBox='0 0 36.342 34.955'>
<g id='prefix__noun_funds_2697308' transform='translate(-20.146 -29.5)'>
<path id='prefix__Path_1062' d='M118.728 155.751a2.057 2.057 0 0 0 2.055-2.055.45.45 0 0 0-.9 0 1.154 1.154 0 1 1-2.308 0 .45.45 0 1 0-.9 0 2.057 2.057 0 0 0 2.053 2.055z' class='prefix__cls-1' data-name='Path 1062' transform='translate(-88.817 -113.992)'/>
<path id='prefix__Path_1063' d='M22.04 48.648h1.611a10.784 10.784 0 0 0 1.624 2.344 7.718 7.718 0 0 1 1.977 5.188 1.844 1.844 0 0 0 1.842 1.842h1.936a1.844 1.844 0 0 0 1.842-1.842.942.942 0 0 1 .941-.941h3.613a.942.942 0 0 1 .941.941 1.844 1.844 0 0 0 1.842 1.842h.85a6.357 6.357 0 0 0 2.024 2.512l4.88 3.325a.45.45 0 0 0 .507 0l4.88-3.325a6.65 6.65 0 0 0 2.637-4.982V48.71a.45.45 0 0 0-.252-.4l-5.045-2.475a10.922 10.922 0 0 0 .1-1.441c0-.14 0-.279-.009-.418a3.186 3.186 0 0 0 2.844-3.163.45.45 0 0 0-.9 0 2.283 2.283 0 0 1-2.015 2.264c-.723-5.906-6.247-10.514-12.934-10.514a15.623 15.623 0 0 0-2.409.188A6.112 6.112 0 0 0 30.264 30a.45.45 0 0 0-.431.582l.139.453a7.687 7.687 0 0 1 .315 2.876 12.891 12.891 0 0 0-6.1 5.056l-.569.9H22.04a1.4 1.4 0 0 0-1.394 1.394v5.992a1.4 1.4 0 0 0 1.394 1.395zm33.046 6.9a5.833 5.833 0 0 1-2.243 4.238l-4.626 3.152-4.626-3.148a5.454 5.454 0 0 1-1.731-2.182 5.071 5.071 0 0 1-.512-2.056v-6.571l6.869-3.361 1.777.872 5.091 2.5zm-33.54-14.29a.494.494 0 0 1 .493-.493h1.828a.45.45 0 0 0 .381-.21l.7-1.109a11.979 11.979 0 0 1 5.9-4.789.45.45 0 0 0 .306-.376 8.583 8.583 0 0 0-.274-3.347 5.22 5.22 0 0 1 4.594 5.176.45.45 0 0 0 .9 0 6.075 6.075 0 0 0-.548-2.525 14.906 14.906 0 0 1 1.943-.128c6.68 0 12.114 4.9 12.114 10.93a10.027 10.027 0 0 1-.054 1.019l-1.416-.695a.451.451 0 0 0-.4 0L40.7 48.3a.45.45 0 0 0-.253.4v6.852a5.291 5.291 0 0 0 .259 1.569h-.5a.942.942 0 0 1-.941-.941 1.844 1.844 0 0 0-1.842-1.842h-3.609a1.844 1.844 0 0 0-1.842 1.842.942.942 0 0 1-.941.941h-1.936a.942.942 0 0 1-.941-.941 8.617 8.617 0 0 0-2.209-5.792 9.779 9.779 0 0 1-1.6-2.382.451.451 0 0 0-.408-.259H22.04a.494.494 0 0 1-.493-.493z' class='prefix__cls-1' data-name='Path 1063'/>
<path id='prefix__Path_1064' d='M343.272 325.512l-1.9-1.85a.451.451 0 0 0-.629.645l2.211 2.156a.45.45 0 0 0 .629 0l3.984-3.885a.451.451 0 0 0-.629-.645z' class='prefix__cls-1' data-name='Path 1064' transform='translate(-295.941 -269.896)'/>
</g>
</svg>
I can successfully show these SVG on HTML using this
<div class="steps" *ngFor="let step of steps;let i =index;">
<div id="steps" class="step-image" [innerHTML]="step.icon">
</div>
</div>
And below is the method from which I'm trying to change their colors
getMergedSvgList(){
var appConstants = new constants.APPCONSTANTS;
console.log(appConstants.svgListJSON);
this.http.get(appConstants.svgListJSON).subscribe(res=>{
var result=res["data"];
for (let i = 0; i < result.length; i++) {
this.svg.push({icon:this.sanitizer.bypassSecurityTrustHtml(result[i].icon),color:result[i].color});
}
this.steps.forEach(ele=>{
$("#steps #svg-icon").eq(index).css('fill',ele.color);
})
})
}
Basically this.steps is the final array which have svg and its fill color code like
this.steps=[
{icon: SafeHtmlImpl, color: "#20639b"},
{icon: SafeHtmlImpl, color: "#20639b"},
{icon: SafeHtmlImpl, color: "#3caea3"}
]
after doing above I can show SVGS but cannot change their fill color
I don't know if there're a better aproach, but you can get it just adding in your svg fill="currentColor"
<svg id='svg-icon' ... fill="currentColor">
Then you can use some like
<div *ngFor="let step of steps">
<div [style.color]="step.color" [innerHTML]="step.icon">
</div>
See stackblitz