[{"data":1,"prerenderedAt":509},["Reactive",2],{"content-query-cZpXygB4uQ":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"image":10,"head":11,"body":25,"_type":504,"_id":505,"_source":506,"_file":507,"_extension":508},"/mixins/icons","mixins",false,"","Icons","Icons фрейморка ZUI","/public/favicon.icn",{"meta":12},[13,16,19,22],{"name":14,"content":15},"keywords","css, framework, scss, sass",{"name":17,"content":18},"robots","index, follow",{"name":20,"content":21},"author","Alexander Zharikov",{"name":23,"content":24},"copyright","© 2023 Zharikov.design",{"type":26,"children":27,"toc":499},"root",[28,36,53,60,79,138,144,225,231,451,493],{"type":29,"tag":30,"props":31,"children":33},"element","h1",{"id":32},"icons",[34],{"type":35,"value":8},"text",{"type":29,"tag":37,"props":38,"children":39},"p",{},[40,42,51],{"type":35,"value":41},"Набор иконок от Google ",{"type":29,"tag":43,"props":44,"children":48},"a",{"href":45,"rel":46},"https://fonts.google.com/icons",[47],"nofollow",[49],{"type":35,"value":50},"Material Symbols",{"type":35,"value":52},".",{"type":29,"tag":54,"props":55,"children":57},"h2",{"id":56},"вызов-иконки-в-элементе",[58],{"type":35,"value":59},"Вызов иконки в элементе",{"type":29,"tag":37,"props":61,"children":62},{},[63,65,72,74],{"type":35,"value":64},"Через класс ",{"type":29,"tag":66,"props":67,"children":69},"code",{"className":68},[],[70],{"type":35,"value":71},"icon",{"type":35,"value":73}," и названием иконки взятом с сайта ",{"type":29,"tag":75,"props":76,"children":77},"strong",{},[78],{"type":35,"value":50},{"type":29,"tag":80,"props":81,"children":85},"pre",{"className":82,"code":83,"language":84,"meta":7,"style":7},"language-html shiki shiki-themes github-light github-dark","\u003Ci class=\"icon\">search\u003C/i>\n","html",[86],{"type":29,"tag":66,"props":87,"children":88},{"__ignoreMap":7},[89],{"type":29,"tag":90,"props":91,"children":94},"span",{"class":92,"line":93},"line",1,[95,101,107,113,118,124,129,133],{"type":29,"tag":90,"props":96,"children":98},{"style":97},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[99],{"type":35,"value":100},"\u003C",{"type":29,"tag":90,"props":102,"children":104},{"style":103},"--shiki-default:#22863A;--shiki-dark:#85E89D",[105],{"type":35,"value":106},"i",{"type":29,"tag":90,"props":108,"children":110},{"style":109},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[111],{"type":35,"value":112}," class",{"type":29,"tag":90,"props":114,"children":115},{"style":97},[116],{"type":35,"value":117},"=",{"type":29,"tag":90,"props":119,"children":121},{"style":120},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[122],{"type":35,"value":123},"\"icon\"",{"type":29,"tag":90,"props":125,"children":126},{"style":97},[127],{"type":35,"value":128},">search\u003C/",{"type":29,"tag":90,"props":130,"children":131},{"style":103},[132],{"type":35,"value":106},{"type":29,"tag":90,"props":134,"children":135},{"style":97},[136],{"type":35,"value":137},">\n",{"type":29,"tag":54,"props":139,"children":141},{"id":140},"вызов-иконки-в-mixin",[142],{"type":35,"value":143},"Вызов иконки в mixin",{"type":29,"tag":80,"props":145,"children":149},{"className":146,"code":147,"language":148,"meta":7,"style":7},"language-scss shiki shiki-themes github-light github-dark",".element {\n  @include icon($zui-24,$primary,$bold);\n}\n","scss",[150],{"type":29,"tag":66,"props":151,"children":152},{"__ignoreMap":7},[153,166,216],{"type":29,"tag":90,"props":154,"children":155},{"class":92,"line":93},[156,161],{"type":29,"tag":90,"props":157,"children":158},{"style":109},[159],{"type":35,"value":160},".element",{"type":29,"tag":90,"props":162,"children":163},{"style":97},[164],{"type":35,"value":165}," {\n",{"type":29,"tag":90,"props":167,"children":169},{"class":92,"line":168},2,[170,176,181,186,192,197,202,206,211],{"type":29,"tag":90,"props":171,"children":173},{"style":172},"--shiki-default:#D73A49;--shiki-dark:#F97583",[174],{"type":35,"value":175},"  @include",{"type":29,"tag":90,"props":177,"children":178},{"style":109},[179],{"type":35,"value":180}," icon",{"type":29,"tag":90,"props":182,"children":183},{"style":97},[184],{"type":35,"value":185},"(",{"type":29,"tag":90,"props":187,"children":189},{"style":188},"--shiki-default:#E36209;--shiki-dark:#FFAB70",[190],{"type":35,"value":191},"$zui-24",{"type":29,"tag":90,"props":193,"children":194},{"style":97},[195],{"type":35,"value":196},",",{"type":29,"tag":90,"props":198,"children":199},{"style":188},[200],{"type":35,"value":201},"$primary",{"type":29,"tag":90,"props":203,"children":204},{"style":97},[205],{"type":35,"value":196},{"type":29,"tag":90,"props":207,"children":208},{"style":188},[209],{"type":35,"value":210},"$bold",{"type":29,"tag":90,"props":212,"children":213},{"style":97},[214],{"type":35,"value":215},");\n",{"type":29,"tag":90,"props":217,"children":219},{"class":92,"line":218},3,[220],{"type":29,"tag":90,"props":221,"children":222},{"style":97},[223],{"type":35,"value":224},"}\n",{"type":29,"tag":54,"props":226,"children":228},{"id":227},"вызов-иконки-в-псевдоэлементах",[229],{"type":35,"value":230},"Вызов иконки в псевдоэлементах",{"type":29,"tag":80,"props":232,"children":234},{"className":146,"code":233,"language":148,"meta":7,"style":7},".element {\n\n  &::before {\n    content: 'search';\n    @include icon($zui-24,$primary,$bold);\n  }\n\n  &::after {\n    content: 'close';\n    @include icon($zui-24,$primary,$bold);\n  }\n}\n",[235],{"type":29,"tag":66,"props":236,"children":237},{"__ignoreMap":7},[238,249,258,275,299,340,349,357,374,395,435,443],{"type":29,"tag":90,"props":239,"children":240},{"class":92,"line":93},[241,245],{"type":29,"tag":90,"props":242,"children":243},{"style":109},[244],{"type":35,"value":160},{"type":29,"tag":90,"props":246,"children":247},{"style":97},[248],{"type":35,"value":165},{"type":29,"tag":90,"props":250,"children":251},{"class":92,"line":168},[252],{"type":29,"tag":90,"props":253,"children":255},{"emptyLinePlaceholder":254},true,[256],{"type":35,"value":257},"\n",{"type":29,"tag":90,"props":259,"children":260},{"class":92,"line":218},[261,266,271],{"type":29,"tag":90,"props":262,"children":263},{"style":103},[264],{"type":35,"value":265},"  &",{"type":29,"tag":90,"props":267,"children":268},{"style":109},[269],{"type":35,"value":270},"::before",{"type":29,"tag":90,"props":272,"children":273},{"style":97},[274],{"type":35,"value":165},{"type":29,"tag":90,"props":276,"children":278},{"class":92,"line":277},4,[279,284,289,294],{"type":29,"tag":90,"props":280,"children":281},{"style":103},[282],{"type":35,"value":283},"    content",{"type":29,"tag":90,"props":285,"children":286},{"style":97},[287],{"type":35,"value":288},": ",{"type":29,"tag":90,"props":290,"children":291},{"style":120},[292],{"type":35,"value":293},"'search'",{"type":29,"tag":90,"props":295,"children":296},{"style":97},[297],{"type":35,"value":298},";\n",{"type":29,"tag":90,"props":300,"children":302},{"class":92,"line":301},5,[303,308,312,316,320,324,328,332,336],{"type":29,"tag":90,"props":304,"children":305},{"style":172},[306],{"type":35,"value":307},"    @include",{"type":29,"tag":90,"props":309,"children":310},{"style":109},[311],{"type":35,"value":180},{"type":29,"tag":90,"props":313,"children":314},{"style":97},[315],{"type":35,"value":185},{"type":29,"tag":90,"props":317,"children":318},{"style":188},[319],{"type":35,"value":191},{"type":29,"tag":90,"props":321,"children":322},{"style":97},[323],{"type":35,"value":196},{"type":29,"tag":90,"props":325,"children":326},{"style":188},[327],{"type":35,"value":201},{"type":29,"tag":90,"props":329,"children":330},{"style":97},[331],{"type":35,"value":196},{"type":29,"tag":90,"props":333,"children":334},{"style":188},[335],{"type":35,"value":210},{"type":29,"tag":90,"props":337,"children":338},{"style":97},[339],{"type":35,"value":215},{"type":29,"tag":90,"props":341,"children":343},{"class":92,"line":342},6,[344],{"type":29,"tag":90,"props":345,"children":346},{"style":97},[347],{"type":35,"value":348},"  }\n",{"type":29,"tag":90,"props":350,"children":352},{"class":92,"line":351},7,[353],{"type":29,"tag":90,"props":354,"children":355},{"emptyLinePlaceholder":254},[356],{"type":35,"value":257},{"type":29,"tag":90,"props":358,"children":360},{"class":92,"line":359},8,[361,365,370],{"type":29,"tag":90,"props":362,"children":363},{"style":103},[364],{"type":35,"value":265},{"type":29,"tag":90,"props":366,"children":367},{"style":109},[368],{"type":35,"value":369},"::after",{"type":29,"tag":90,"props":371,"children":372},{"style":97},[373],{"type":35,"value":165},{"type":29,"tag":90,"props":375,"children":377},{"class":92,"line":376},9,[378,382,386,391],{"type":29,"tag":90,"props":379,"children":380},{"style":103},[381],{"type":35,"value":283},{"type":29,"tag":90,"props":383,"children":384},{"style":97},[385],{"type":35,"value":288},{"type":29,"tag":90,"props":387,"children":388},{"style":120},[389],{"type":35,"value":390},"'close'",{"type":29,"tag":90,"props":392,"children":393},{"style":97},[394],{"type":35,"value":298},{"type":29,"tag":90,"props":396,"children":398},{"class":92,"line":397},10,[399,403,407,411,415,419,423,427,431],{"type":29,"tag":90,"props":400,"children":401},{"style":172},[402],{"type":35,"value":307},{"type":29,"tag":90,"props":404,"children":405},{"style":109},[406],{"type":35,"value":180},{"type":29,"tag":90,"props":408,"children":409},{"style":97},[410],{"type":35,"value":185},{"type":29,"tag":90,"props":412,"children":413},{"style":188},[414],{"type":35,"value":191},{"type":29,"tag":90,"props":416,"children":417},{"style":97},[418],{"type":35,"value":196},{"type":29,"tag":90,"props":420,"children":421},{"style":188},[422],{"type":35,"value":201},{"type":29,"tag":90,"props":424,"children":425},{"style":97},[426],{"type":35,"value":196},{"type":29,"tag":90,"props":428,"children":429},{"style":188},[430],{"type":35,"value":210},{"type":29,"tag":90,"props":432,"children":433},{"style":97},[434],{"type":35,"value":215},{"type":29,"tag":90,"props":436,"children":438},{"class":92,"line":437},11,[439],{"type":29,"tag":90,"props":440,"children":441},{"style":97},[442],{"type":35,"value":348},{"type":29,"tag":90,"props":444,"children":446},{"class":92,"line":445},12,[447],{"type":29,"tag":90,"props":448,"children":449},{"style":97},[450],{"type":35,"value":224},{"type":29,"tag":37,"props":452,"children":453},{},[454,459,461,465,470,472,475,480,482,485,491],{"type":29,"tag":66,"props":455,"children":457},{"className":456},[],[458],{"type":35,"value":191},{"type":35,"value":460}," - размер иконки",{"type":29,"tag":462,"props":463,"children":464},"br",{},[],{"type":29,"tag":66,"props":466,"children":468},{"className":467},[],[469],{"type":35,"value":201},{"type":35,"value":471}," - цвет иконки",{"type":29,"tag":462,"props":473,"children":474},{},[],{"type":29,"tag":66,"props":476,"children":478},{"className":477},[],[479],{"type":35,"value":210},{"type":35,"value":481}," - насыщенность иконки",{"type":29,"tag":462,"props":483,"children":484},{},[],{"type":29,"tag":66,"props":486,"children":488},{"className":487},[],[489],{"type":35,"value":490},"search",{"type":35,"value":492}," - название иконки",{"type":29,"tag":494,"props":495,"children":496},"style",{},[497],{"type":35,"value":498},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":7,"searchDepth":168,"depth":168,"links":500},[501,502,503],{"id":56,"depth":168,"text":59},{"id":140,"depth":168,"text":143},{"id":227,"depth":168,"text":230},"markdown","content:3.mixins:icons.md","content","3.mixins/icons.md","md",1731665135847]