Skip to content

Instantly share code, notes, and snippets.

@pointofpresence

pointofpresence/colored_svg_icon.jsx

Last active March 31, 2024 13:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pointofpresence/c63f9bd2569873670f1f7ec90ad6fc62 to your computer and use it in GitHub Desktop.
Save pointofpresence/c63f9bd2569873670f1f7ec90ad6fc62 to your computer and use it in GitHub Desktop.
Download ZIP
Чтобы установить цвет иконки, указанный в пропсе color, в SVG-файле lock.svg, к тегу <svg> добавляется атрибут fill="currentColor". Значение currentColor означает, что цвет будет взят из текущего контекста, в данном случае он будет взят из переданного цвета color для компонента LockIcon. Таким образом, в итоге, иконка будет отображена с цветом, …
Raw
colored_svg_icon.jsx
import LockIcon from "../assets/lock.svg"
// and then render it as:
<LockIcon color={theme.colors.text.primary} />
// and then in lock.svg I just add fill="currentColor" in the svg tag.
/*
Чтобы установить цвет иконки, указанный в пропсе color, в SVG-файле lock.svg, к тегу <svg> добавляется атрибут
fill="currentColor". Значение currentColor означает, что цвет будет взят из текущего контекста, в данном случае
он будет взят из переданного цвета color для компонента LockIcon. Таким образом, в итоге, иконка будет отображена
с цветом, указанным в пропсе color, благодаря использованию атрибута fill="currentColor" в SVG-файле lock.svg.
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment