Элегантное использование векторной графики svg в реакции

внешний интерфейс

Иконки-значки могут иметь множество форм, например, CSS Sprite, значки эталонных шрифтов, чистый css (простой значок) и так далее. Достоинства и недостатки здесь не повторяются, можете сами погуглить. Давайте войдем в тему и поговорим о сегодняшнем главном герое svg.

1. История развития svg

  • 4 сентября 2001 г. выпущен SVG 1.0.
  • 4 января 2003 г. выпущен SVG 1.1.
  • 14 января 2003 г. были представлены мобильные подверсии SVG: SVG Tiny и SVG Basic.
  • 22 декабря 2008 г. выпущен SVG Tiny 1.2.
  • 16 августа 2011 г. был выпущен SVG 1.1 (версия 2), ставший текущим стандартом, рекомендованным W3C.
  • W3C все еще работает над SVG 2.

Он был добавлен в стандарт W3C в 2001 году. Спустя столько времени, наконец, пришло время перевернуться.

2. Как использовать svg на общих страницах

SVG — это формат изображения, основанный на синтаксисе XML, полное название — Scalable Vector Graphics. Другие форматы изображений основаны на обработке пикселей, а SVG — это описание формы изображения, поэтому по сути это текстовый файл небольшого размера, который не будет искажаться независимо от того, сколько раз его увеличивают. Файлы SVG можно вставлять непосредственно в веб-страницы, становиться частью модели DOM, а затем обрабатывать их с помощью JavaScript и CSS.

  • Ниже приведен пример кода SVG, вставленного непосредственно на веб-страницу.
<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" style="fill:blue;stroke-width:2;stroke:rgb(0,0,0)"/>
</svg>

Эффект следующий:

Вы можете увидеть простоту и практичность svg, а также эффект отображения. Итак, как использовать svg в реакции. Можно ли повторно использовать SVG как модуль? Ответ раскрывается ниже.

3. Как использовать svg в реакции

На самом деле, вы также можете использовать svg, как указано выше, но здесь возникает проблема. Дублировать svg для копирования и вставки кода? Будут бесконечные проблемы в последующем обслуживании и модификации. Вот я и подумал о компонентизации. Как к компонентам тогда. На сцену вышел svg в сочетании с тегом use. Вместо того, чтобы писать код для отрисовки иконки svg прямо на главной странице, поместите этот большой кусок кода в другой файл, а затем используйте use для ссылки на код для отрисовки иконки (как будто это делает github).

Сначала поговорим о принципе реализации. см. код

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__">
    <symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon" viewBox="0 0 1024 1024" id="bank">
    <defs><style type="text/css"></style></defs>
    <rect width="100%" height="100%" style="fill:rgb(153, 238, 172);stroke-width:2;stroke:rgb(0,0,0)"></rect>    
    </symbol>
</svg>

как использовать

    <svg><use xlink:href="#bank"></use></svg>

Идентификатор в символе и используемый href должны соответствовать

Это отобразит svg выше

Итак, подведем итог:

  1. файлы svg хранятся отдельно в проекте реакции
  2. Может быть загружен заранее или по требованию
  3. Используйте то же, что и выше

Хотя его можно использовать, если прямая ссылка может быть упакована с ошибкой или не отображаться, общие причины:

  1. Файл конфигурации веб-пакета содержит обработку svg в загрузчике изображений или шрифтов.
  2. Неправильная поза svg Метод обработки: я думаю, что svg-sprite-loader проще в использовании.Конечно, есть еще react-svg и react-svg-loader для обработки svg loader. Если вам нужно знать о Google

webpack.config.js

{
      test: /\.(eot|woff2?|ttf|svg)$/,
      exclude: path.resolve(__dirname, '../src/static/icons'), //不处理指定svg的文件
      use: [
        {
          loader: "url-loader",
          options: {
            name: "[name]-[hash:5].min.[ext]",
            limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
            outputPath: "font",
            publicPath:'font'
          }
        }
      ]
}

{
      test: /\.svg$/,
      loader: 'svg-sprite-loader',
      include: path.resolve(__dirname, '../src/static/icons'), // //只处理指定svg的文件
      // options: {
      //   symbolId: '[name]'
      // }
}

высокая энергия вперед

После вышеописанной настройки можно прямо в компоненте

import '../../static/icons/bank'; //引入对应的bank.svg文件
...
//下面使用  需要把xlink:href 替换xlinkHref
 <svg><use xlinkHref="#bank"></use></svg>

Если каждый раз нужно импортировать много иконок, это немного раздражает ленивого человека, но следующий способ может помочь вам импортировать их все сразу Создайте index.js в соответствующем файле значков.

let requireAll = requireContext => requireContext.keys().map(requireContext)
let svgs = require.context('./', false, /\.svg$/)
requireAll(svgs)

После прямого импорта index.js все компоненты могут успешно использовать все svg. Конечно, идентификатор по умолчанию — это имя файла.

Уведомление:

Ленивая загрузка также работает, если вы не хотите импортировать все svg сразу

npm install @babel/plugin-syntax-dynamic-import --save-dev
...
//在.babelrc中plugins加上
"plugins": [
        "@babel/plugin-syntax-dynamic-import",
    ]

может быть достигнут. Написание мелкое, если вы не понимаете, пожалуйста, оставьте сообщение! ! !

Категории