На некоторых современных веб-сайтах с плоским дизайном, особенно на мобильных веб-сайтах, часто есть много простых и понятных небольших значков, таких как значки веб-сайтов, аватары пользователей по умолчанию и фиксированные панели переключателей внизу главной страницы мобильных веб-страниц.Эти маленькие значки обычно Все они сделаны художником и могут быть помещены на карту спрайтов, а затем вырезаны и отображены во внешнем интерфейсе.
На самом деле, эти простые маленькие иконки вовсе не обязательно делать художникам, фронтенд можно сделатьsvgИспользуйте код для рисования этих простых значков, и поскольку эти значки описываются кодом, если вы хотите изменить эти значки, например изменить цвет значка, форму значка, размер и т. д., просто измените несколько строк кода Все очень просто, не нужно переделывать и переделывать арт вообще.
В этой статье не описывается, как использоватьsvgПриходите рисовать, я не понимаюsvgВы можете перейти сюда, чтобы проверить, в этой статье в основном рассказывается о том, как использовать его на веб-сайте.svg.
Использование SVG на обычных веб-страницах
svgиспользовать XMLФормат определяет изображение, вы также можете думать о нем как об общемHTMLЯрлыки, встроенные в веб-страницу для создания определенного эффекта, используемого на веб-странице.svgОсновной пример выглядит следующим образом:
<body>
<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" style="fill:pink;stroke-width:1;stroke:rgb(0,0,0)"/>
</svg></body>Эффект следующий:
Видно, что использование обычных веб-страницsvgочень просто, пока вы можете поставитьsvgИконка нарисована, не представляет проблем на веб-странице.
Использование Svg в Vue
Вы можете использовать его так же, как и на обычных веб-страницах.svgпо тому путиVueиспользуется, однако, поскольку это уже вариантvueПриходите компоновать проект разработки, затем в куче компонентов, перемежающихся большим разделомsvgВедь это как-то некрасиво.
Одним из решений является использованиеsvgиз useтеги, не пишите рисовать прямо на главной страницеsvgКод значка, но поместите этот большой кусок кода в другой файл, а затем используйтеuseПросто обратитесь к этому коду для рисования значка (кажется, что мобильный терминал голоден).
Например, нарисовать всеsvgкод вsvg-icon.vueВ файле код отрисовки всех иконок используетsymbolТеги разделены и названы отдельно, чтобы избежать путаницы, затем экспортируйте этот файл как компонент, импортируйте этот компонент на главную страницу, а затем используйте его при необходимости.svgзначок место, черезuseЭтикетки приносят это.
svg-draw.vueПример кода выглядит следующим образом:
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{position:'absolute',width:0,height:0}}>
<defs>
<symbol viewBox="0 0 26 31" id="location">
<path xmlns="http://www.w3.org/2000/svg" d="M512.571517 65.907059c-204.736964 0-370.715183 165.979242-370.715183 370.724393 0 94.440929 35.320437 180.625824 93.462648 246.083651 1.572822 2.690272 3.50994 5.225001 5.817496 7.531534l240.297878 251.597225c1.279133 1.864464 2.736321 3.64297 4.393054 5.298679 2.111081 2.111081 4.418636 3.90596 6.856152 5.402033 14.458293 10.06524 34.491559 8.658194 47.393403-4.242627 3.26537-3.263323 5.78782-6.987135 7.582699-10.960633L783.610536 690.24766c1.867534-1.866511 3.489474-3.88447 4.876054-6.010901 58.951647-65.640999 94.819552-152.431691 94.819552-247.604284C883.305119 231.886301 717.325877 65.907059 512.571517 65.907059zM512.390391 588.611865c-82.734306 0-149.814074-67.087954-149.814074-149.842727 0-82.753749 67.079768-149.833517 149.814074-149.833517 82.772168 0 149.851936 67.079768 149.851936 149.833517C662.242328 521.523911 595.161536 588.611865 512.390391 588.611865z" fill="#d81e06"/>
</symbol>
</defs>
</svg></template>целыйvueКомпонент экспортирует большойsvg,этоsvgСодержит множество маленьких иконок, похожих на спрайты, каждая иконка используетsymbolРазделены и названы индивидуально для удобства.
Пример использования следующий:
// index.vue
...<svg class="location-icon">
<use xlink:href="#location"></use></svg>...Затем вы можете увидеть, что соответствующая страница успешно отображается на веб-странице.svgЗначок вверх:
Однако по-прежнему существует проблема, если текущему веб-сайту необходимо использоватьsvgЕсть много икон, которые обязательно вызовутsvg-icon.vueРазмер этого файла постепенно увеличивается, и для текущего имени страницы нужно использовать только один из них.svgзначок, в результате вы ставите сотни иконокsvgКод, весь загруженный, явно не очень дружественный. Лучше всего подгружать его по запросу. Текущая веб-страница должна загрузить какие значки, и даже некоторые значки, которые могут не отображаться, должны быть загружены, когда они должны появиться. нет шансов появляется, то никогда не загружается.
GithubВ Интернете есть много таких плагинов, я представлю плагин, который я считаю очень полезным: vue-svg-icon, который прост в использовании и быстр в использовании.
Прежде всего, установите этот плагин, не много, чтобы сказать, после завершения установки зарегистрируйте этот плагин в файле входа в проект, чтобы облегчить глобальную вызов:
import Icon from 'vue-svg-icon/Icon.vue'Vue.component('icon', Icon)Затем в корневом каталоге/srcСоздайте новый в каталогеsvgкаталог (в настоящее время этот путь может быть только таким, он не может быть настроен как другие пути и каталоги), а затем поместите файлы, которые вы хотите использовать, в этот каталогsvgИконыsvgфайл.
Например, значок WeChat.svgследующим образом:
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1502683891821" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2885" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css"></style></defs><path d="M282.6 363.8c-23.7 0-47-15.7-47-38.9 0-23.7 23.3-38.9 46.5-38.9 23.7 0 38.9 15.2 38.9 38.9 0.5 23.2-15.1 38.9-38.4 38.9zM500.4 286c23.7 0 38.9 15.2 38.9 38.9 0 23.3-15.2 38.9-38.9 38.9-23.3 0-47-15.7-47-38.9 0-23.7 23.7-38.9 47-38.9z m167.7 84.5c9.8 0 19.7 0.5 30 1.8-27.3-125.6-161.4-218.7-314.4-218.7C212.4 153.6 72 270.3 72 418.3c0 85.9 46.5 155.6 124.8 210.2l-31.3 93.9 109.1-54.6c38.9 7.6 70.2 15.7 109.1 15.7 9.4 0 19.2-0.5 29.1-1.3-6.3-20.6-9.8-42.9-9.8-65.3-0.1-136 116.6-246.4 265.1-246.4z" p-id="2886"></path><path d="M772.7 573.9c-15.2 0-30.9-15.2-30.9-30.9 0.5-15.7 15.7-31.3 30.9-31.3 23.7 0 39.4 15.7 39.4 31.3-0.1 15.7-15.7 30.9-39.4 30.9z m-171.3 0c-15.2 0-30.9-15.2-30.9-30.9s15.7-31.3 30.9-31.3c23.7 0 38.9 15.7 38.9 31.3 0.5 15.7-15.2 30.9-38.9 30.9zM952 613.3C952 488.5 827.2 387 687.3 387c-148 0-264.7 101.5-264.7 226.3 0 124.8 116.7 225.8 264.7 225.8 31.3 0 62.6-8.1 93.5-15.7l85.9 47-23.7-77.8c62.5-47 109-109.1 109-179.3z" p-id="2887"></path></svg>Сохраните приведенный выше код в.svgв файле, напримерwx.svg, помещать/src/svgкаталог, на этом подготовка завершена.
Затем, если вы хотите использовать его, это очень просто, прямо вvueВ компоненте написано:
<template>
<icon class="wx-icon" name="wx"></icon></template>При обновлении страницы откройте консоль и вы увидите, что эта страница загруженаwx.svgфайл, это достигаетсяsvgИмпорт файлов по запросу.
Использование Svg в реакции
существует Reactиспользуется вSvgа также vueТоже самое, тут тоже 3 варианта, один прямо вreactиз readerнапишите в методеsvgкод, второй - преобразовать всеsvgПоместите код чертежа в файл, затем загрузите файл за один раз, используйтеuseТег относится к ответуsvgПаттерны, а третий импортируется по запросу с помощью плагинов.
Первый пишется прямо в методе рендераsvgО способе много говорить не буду, второй тоже очень простой, иvueТо же самое, но нужно обратить внимание на написание.
render() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{position:'absolute',width:0,height:0}}>
<defs>
<symbol viewBox="0 0 26 31" id="location">
<path fill="#FFF" fillRule="evenodd" d="M22.116 22.601c-2.329 2.804-7.669 7.827-7.669 7.827-.799.762-2.094.763-2.897-.008 0 0-5.26-4.97-7.643-7.796C1.524 19.8 0 16.89 0 13.194 0 5.908 5.82 0 13 0s13 5.907 13 13.195c0 3.682-1.554 6.602-3.884 9.406zM18 13a5 5 0 1 0-10 0 5 5 0 0 0 10 0z"></path>
</symbol>
<symbol viewBox="0 0 14 8" id="arrow">
<path fill="#FFF" fillRule="evenodd" d="M5.588 6.588c.78.78 2.04.784 2.824 0l5.176-5.176c.78-.78.517-1.412-.582-1.412H.994C-.107 0-.372.628.412 1.412l5.176 5.176z"></path>
</symbol>
</svg>
)
}Главное - обратить внимание, т.к.reactиспользовать jsxсинтаксис, не допускается-дефис, так что-то вродеfill-ruleТакие свойства должны быть записаны какfillRule, то же самое верно и при цитировании.
// 引用的时候需要将 `xlink:href` 改写成 xlinkHref<svg className="arrow-left">
<use xlinkHref="#arrow-left"></use>
</svg>Третий вводится по запросу, загружая только те, которые требуются в данный момент.svgформу, то же самое положить каждыйsvgИзображение сохраняется в виде отдельного файла, а затем используется там, где это необходимо. GithubЕсть проект react-svg, который на самом деле является оберткой для SVGInjector.
После установки react-svg вы можете использовать его так:
import ReactSVG from 'react-svg'
ReactDOM.render(
<ReactSVG
path="atomic.svg"
callback={svg => console.log(svg)}
className="example"
/>,
document.querySelector('.Root')
)Как правило, это учитывается только при использовании маленьких значков.svg, а эти маленькие значки вообще относительно просты, и рисовать их не сложно, но в большинстве случаев нет необходимости рисовать их самостоятельно, многие сайты предоставляютsvgНапример, у Али шрифта есть большое количество иконок, которые в принципе могут удовлетворить большинство потребностей, кроме того, есть аналогичные сайты, такие как easyicon и icomoon.
——————————————————
Нажмите и удерживайте QR-код, следуйте Dazhuanzhuan FE