người hướng dẫn. [00. 00] Tại đây, bạn có thể thấy đoạn biểu tượng SVG bên trong. Nếu chúng ta nhìn kỹ hơn, chúng ta có thể thấy rằng màu biểu tượng SVG không khớp với màu phông chữ. Chúng ta có thể dễ dàng khắc phục điều này bằng cách áp dụng một màu khác cho nét thuộc tính CSS của SVG. Hãy để tôi nhanh chóng thay đổi nó qua nó để chứng minh điều đó
[00. 23] Mặc dù điều này có vẻ tốt ở đây, nhưng đôi khi, bạn có thể làm điều gì đó khác biệt và chỉ muốn sử dụng màu phông chữ hiện tại. May mắn thay, điều này có thể thực hiện được bằng cách sử dụng từ khóa CSS current color. thì đấy. Chúng tôi thấy màu sắc bây giờ khớp với nhau
[00. 40] Bây giờ chúng ta có thể thay đổi màu của văn bản. Như bạn sẽ thấy, nét biểu tượng SVG sẽ luôn khớp với màu phông chữ. Điều này rất hữu ích, đặc biệt nếu bạn tạo các thành phần có thể tái sử dụng bằng thư viện giao diện người dùng JavaScript
[00. 56] Một điều nữa cần biết, bạn có thể sử dụng màu hiện tại cho mọi thuộc tính CSS chấp nhận một màu
Nếu bạn đang ở đây, có lẽ bạn đang tìm kiếm một giải pháp đơn giản để thay đổi màu biểu tượng SVG, theo một cách đơn giản để thực hiện
Bài đăng này cho biết cách thực hiện việc này và thậm chí còn có phần thưởng SCSS, điều đó sẽ giảm nó thành một dòng mã
Cùng một biểu tượng theo phong cách khác nhau - thậm chí có thể "làm động" biểu tượng bằng nền GIF hoặc khung hình chính CSS
Vậy hãy bắt đầu
Kỹ thuậtKỹ thuật này sử dụng thẻ
.some-icon {
height: 10px;
width: 10px;
background-color: $default-text;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-image: url["/assets/icons/calendar.svg"];
}
3 với mask-image và background-color, nó sẽ không liên quan khi- Bạn muốn sử dụng thẻ
.some-icon {
4 làm phần tử html cho biểu tượng vì không thể thao tác với nó bằng CSS
height: 10px;
width: 10px;
background-color: $default-text;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-image: url["/assets/icons/calendar.svg"];
} - Triển khai nội tuyến SVG, trong trường hợp này có lẽ có nhiều kỹ thuật phù hợp hơn
div
Phần tử html cho biểu tượng sẽ là một div, Điều này sẽ cho phép chúng tôi thao tác với SVG bằng CSS và triển khai cơ bản trong html so với SVG nội tuyến
hình ảnh mặt nạ
Chúng tôi sẽ sử dụng mặt nạ cho biểu tượng, do đó để SVG che div và tạo cấu trúc cho nó
màu nền
Màu của biểu tượng được lấy từ màu nền của div, bằng cách hiển thị thông qua cấu trúc của SVG
Thực hiện cơ bản nhấtCách triển khai cơ bản nhất là một lớp duy nhất có tất cả các thuộc tính CSS cần thiết để áp dụng cho div
mục lục. html
Phong cách. css
.some-icon {
height: 10px;
width: 10px;
background-color: $default-text;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-image: url["/assets/icons/calendar.svg"];
}
Triển khai nâng caoXác định một lớp cho tất cả các thuộc tính phổ biến trong
.some-icon {
height: 10px;
width: 10px;
background-color: $default-text;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-image: url["/assets/icons/calendar.svg"];
}
0, đối với các thuộc tính không phổ biến như chiều cao, chiều rộng, màu nền và hình ảnh mặt nạ, hãy thêm một lớp cụ thểmục lục. html
Phong cách. css
.svg-icon.calander {
height: 10px;
width: 10px;
background-color: $default-text;
mask-image: url["/assets/icons/calendar.svg"];
}
toàn cầu. css
.svg-icon {
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Triển khai dành cho chuyên gia — mixinMixins cho phép bạn xác định các kiểu có thể được sử dụng lại trong toàn bộ biểu định kiểu của bạn. Chúng giúp bạn dễ dàng tránh sử dụng các lớp phi ngữ nghĩa như
.some-icon {
1 và phân phối các bộ sưu tập kiểu trong thư viện.
height: 10px;
width: 10px;
background-color: $default-text;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-image: url["/assets/icons/calendar.svg"];
}
— Tài liệu chính thức của Sass
Chúng tôi sẽ tạo một mixin bằng SCSS. Mixin sẽ lấy đối số cho tất cả các thuộc tính không phổ biến
biến. scss
@mixin svg-icon[$path, $height, $width, $color ] {
height: $height;
width: $width;
background-color: $color;
mask-image: url[$path];
background-size: cover;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
mục lục. html
________số 8Phong cách. scss
.calendar {
@include svg-icon["/assets/icons/calendar.svg", 20px, 20px, #818aac];
}
Các mixin được đưa vào ngữ cảnh hiện tại bằng cách sử dụng quy tắc
.some-icon {
2, được viết là
height: 10px;
width: 10px;
background-color: $default-text;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-image: url["/assets/icons/calendar.svg"];
}.some-icon {
3 hoặc
height: 10px;
width: 10px;
background-color: $default-text;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-image: url["/assets/icons/calendar.svg"];
}.some-icon {
4, với tên của mixin được bao gồm.
height: 10px;
width: 10px;
background-color: $default-text;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-image: url["/assets/icons/calendar.svg"];
}
— Tài liệu chính thức của Sass
Ví dụ trực tiếp
Để kết luậnĐây là một triển khai cơ bản và rất hữu ích, sẽ giữ cho thư mục nội dung và mã của bạn ở mức tối thiểu nhất có thể