1
00:00:00,260 --> 00:00:02,650
You learned that CSS
variables can be updated and

2
00:00:02,650 --> 00:00:05,930
altered in line within the style
attribute of an element.

3
00:00:05,930 --> 00:00:09,520
Similarly you can use CSS
variables to modify both style and

4
00:00:09,520 --> 00:00:13,490
presentational attributes
inside in line svgs.

5
00:00:13,490 --> 00:00:16,370
In this video i'll teach you how
to create easily customizable

6
00:00:16,370 --> 00:00:18,750
SVG icons with CSS variables.

7
00:00:18,750 --> 00:00:22,690
To learn more about SVG be sure to watch
the SVG videos posted in the teachers

8
00:00:22,690 --> 00:00:23,488
notes with this video.

9
00:00:23,488 --> 00:00:26,030
So at index.html,

10
00:00:26,030 --> 00:00:31,920
there's a symbol element that defines
a reusable template of a heart icon.

11
00:00:31,920 --> 00:00:36,540
Below the symbol, the use element
is used three times to copy or

12
00:00:36,540 --> 00:00:38,270
instantiate the symbol.

13
00:00:38,270 --> 00:00:43,360
As you can see, this creates three
separate instances of the heart symbol.

14
00:00:43,360 --> 00:00:47,620
Now the symbol is made
up of two path elements.

15
00:00:47,620 --> 00:00:51,750
And I want to give each icon some
color and depth using two fill colors.

16
00:00:51,750 --> 00:00:56,580
One path will have a light fill,
and the other path, a darker fill.

17
00:00:56,580 --> 00:01:00,402
So start by giving each
path a fill attribute.

18
00:01:06,640 --> 00:01:10,793
I'll set the top path's fill value to var,

19
00:01:10,793 --> 00:01:15,404
passing it the variable
name secondary-fill.

20
00:01:16,440 --> 00:01:22,301
And then I'll set the bottom's
fill value to var, primary-fill.

21
00:01:24,554 --> 00:01:28,941
Notice that the parent SVG of
each instance of the symbol has

22
00:01:28,941 --> 00:01:30,440
a different class.

23
00:01:30,440 --> 00:01:32,990
We have heart-red,
heart-green, and heart-blue.

24
00:01:32,990 --> 00:01:36,700
Well when you reuse SVG
graphics with the Use element

25
00:01:36,700 --> 00:01:40,290
it inherits CSS from its parent context.

26
00:01:40,290 --> 00:01:45,160
So in variables.css, I'll scope
the primary and secondary fill variables

27
00:01:45,160 --> 00:01:49,950
locally inside each parent class and
set them to my desired colors.

28
00:01:49,950 --> 00:01:54,830
So first,
in the heart-red rule I'll set a primary

29
00:01:54,830 --> 00:01:59,081
fill Value to #c44,

30
00:01:59,081 --> 00:02:04,364
then I'll set the secondary-fill

31
00:02:04,364 --> 00:02:08,702
value to #d35f5f.

32
00:02:08,702 --> 00:02:12,969
To set the other two, I'll go ahead and
copy this set of variables,

33
00:02:14,460 --> 00:02:17,480
paste them inside the hard green rule.

34
00:02:17,480 --> 00:02:23,619
And here I'll set primary
fill to 41af5d and

35
00:02:23,619 --> 00:02:30,792
secondary fill to 5ece7f.

36
00:02:32,030 --> 00:02:38,790
then down in the heart blue rule,
I'll set primary fill

37
00:02:38,790 --> 00:02:42,910
to 2e978af and

38
00:02:42,910 --> 00:02:48,080
secondary fill to 38acd0.

39
00:02:49,460 --> 00:02:54,630
The icons inherit the color
values from their parent.

40
00:02:54,630 --> 00:02:55,210
So now,

41
00:02:55,210 --> 00:03:00,850
we have three colorful icons where each
path is set to a different fill color.

42
00:03:00,850 --> 00:03:05,680
And you can use var as values for
other svg attributes like stroke.

43
00:03:05,680 --> 00:03:08,180
For example, I'll give the symbol element.

44
00:03:09,530 --> 00:03:11,616
A stroke width of two

45
00:03:16,206 --> 00:03:20,990
Then add a stroke attribute,
and set the Value to var,

46
00:03:20,990 --> 00:03:24,425
passing it the primary fill variable.

47
00:03:26,745 --> 00:03:27,765
And as you can see,

48
00:03:27,765 --> 00:03:32,435
the variable sets each stroke color using
the value assigned in the parent class.