Reference SVG images in CSS to support dynamic color switching implementation code
|
When we add an svg image to display, react prompts that the file cannot be found. We can add a declaration of the image type in the global file global.d.ts: For details, see "TypeScript prompts that the resource file cannot be found after referencing it" After the declaration, the reference will not report an error. Then we look at the svg image, which has colors and other settings:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Window_Return</title>
<g id="control" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="window_return">
<rect id="Rectangle-6" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path d="M8.35417135,12.9957726 C8.13320936,12.7345458 8,12.3967967 8,12.0279541 C8,11.6586058 8.13357489,11.3204363 8.3550807,11.0590615 L8.3521103,11.0564202 L14.356041,4.51971371 L14.3599873,4.52318728 C14.635253,4.20288524 15.0434555,4 15.4990737,4 C16.3280124,4 17,4.67157288 17,5.5 C17,5.8870199 16.8533375,6.23980607 16.6125263,6.50587693 L16.6210783,6.51340439 L11.5390798,12.0228281 L16.5124905,17.3935277 C16.8121157,17.6677653 17,18.0619548 17,18.5 C17,19.3284271 16.3280124,20 15.4990737,20 C15.0262153,20 14.6044287,19.7814702 14.3293154,19.439953 L8.35278214,12.9970098 L8.35417135,12.9957726 L8.35417135,12.9957726 Z" id="Oval-43-Copy-3" fill="#808080"></path>
</g>
</g>
</svg>Is it possible to display different effects based on an svg? For example, highlight after hover Theoretically, it is feasible to add XML code parsing and then add SVG rendering as a component. After browsing the Internet, I found that most of them are not very practical. Many of them load global images and use them as separate components or caches, which is not suitable. react-inlinesvg I found a pretty good open source, it’s super good, I recommend it! https://github.com/gilbarbara/react-inlinesvg Installation: Add reference: import Add a picture:
import BackPng from '../../../../assets/images/back.svg';
<SVG className="backIcon" src={BackPng} />To set dynamic styles:
&:hover {
path {
fill: #4ecb78;
}
.backContent {
color: #4ecb78;
}
}
&:active {
path {
fill: #2baf57;
}
.backContent {
color: #2baf57;
}
}
This concludes this article about the implementation code for referencing svg images in CSS to support dynamic color switching. For more relevant css svg dynamic color switching content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: How to insert video into HTML and make it compatible with all browsers
>>: JavaScript Prototype Details
Recommend
MySQL 5.7.21 decompression version installation and configuration method graphic tutorial
Since I often install the system, I have to reins...
Implementation of React page turner (including front and back ends)
Table of contents front end According to the abov...
Vue imports excel table, and automatically downloads the data that failed to import
There is such a requirement: an import button, cl...
How to understand Vue front-end and back-end data interaction and display
Table of contents 1. Technical Overview 2. Techni...
Summary of the differences between MySQL storage engines MyISAM and InnoDB
1. Changes in MySQL's default storage engine ...
Detailed explanation of the platform bus of Linux driver
Table of contents 1. Introduction to platform bus...
Vue's simple implementation process of imitating NetEase Cloud Music Player interface
Due to the needs of the work project, song playba...
vue cli3 implements the steps of packaging by environment
The vue project built with cli3 is known as a zer...
Summary of naming conventions for HTML and CSS
CSS naming rules header: header Content: content/c...
Detailed explanation of using backgroundImage to solve the image carousel switching
Implementing carousel with a single DOM node You ...
Detailed explanation of nginx's default_server definition and matching rules
The default_server directive of nginx can define ...
How to configure nginx to return text or json
Sometimes when requesting certain interfaces, you...
Detailed explanation of Docker cross-host container communication overlay implementation process
There are also two servers: Preparation: Set the ...
Use the sed command to modify the kv configuration file in Linux
sed is a character stream editor under Unix, that...
VMware and CentOS system installation method to reset the root password
Today's Tasks 1. Choice of Linux distribution...