Vue使用svg图标 | uniapp使用svg图标 (以及解决配置了svg-sprite-loader但还是不显示svg图标的问题)

文章分为三部分:1.vue使用svg,2.uniapp使用svg,3.svg常用知识

1.Vue自定义icon-svg组件

  1. 安装svg-sprite-loader
    npm i -D svg-sprite-loader
  2. 新建 Icon-svg 组件
<template>
  <svg class="svg-icon"
       aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
  1. 在 src 文件夹中创建 icons 文件夹。icons 文件夹中新增 svg 文件夹(用来存放 svg 文件)与 index.js 文件:
import SvgIcon from "@/components/SvgIcon";    //引用创建的组件
import Vue from "vue";

// 注册到全局
Vue.component("svg-icon", SvgIcon);

const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context("./svg", false, /\.svg$/);
requireAll(req);
  1. 在 main.js 中导入 icons/index.js
   import "@/icons";
  1. 修改 vue.config.js或者修改build/webpack.base.conf.js文件
注意*:注意options里的symbolId,如果你打算存的svg文件是icon-name格式的,symbolId就写成"[name]",如果svg文件起名是name,symbolId就写成"icon-[name]"

否则不报错,但是显示不出来
修改 vue.config.js(没有的话在根目录手动创建)

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  chainWebpack(config) {
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

修改build/webpack.base.conf.js文件,添加如下规则

{
      test: /\.svg$/,
       loader: 'svg-sprite-loader',
       include: [resolve('src/icons')],
       options: {
         symbolId: 'icon-[name]'
       }
 },
  1. 在vue文件中使用svg,在icon-class的值修改为svg文件的名字即可
 <svg-icon icon-class="anquan"/>

2.uniapp自定义iconfont组件

  1. 打开 https://www.iconfont.cn/ 阿里巴巴图标库,找到需要的图标添加到购物车
    Vue使用svg图标 | uniapp使用svg图标 (以及解决配置了svg-sprite-loader但还是不显示svg图标的问题)_第1张图片
  2. 点击购物车图标,添加至项目
    Vue使用svg图标 | uniapp使用svg图标 (以及解决配置了svg-sprite-loader但还是不显示svg图标的问题)_第2张图片
    Vue使用svg图标 | uniapp使用svg图标 (以及解决配置了svg-sprite-loader但还是不显示svg图标的问题)_第3张图片
  3. 进入菜单栏:资源管理》我的项目
    Vue使用svg图标 | uniapp使用svg图标 (以及解决配置了svg-sprite-loader但还是不显示svg图标的问题)_第4张图片
    Vue使用svg图标 | uniapp使用svg图标 (以及解决配置了svg-sprite-loader但还是不显示svg图标的问题)_第5张图片
    Vue使用svg图标 | uniapp使用svg图标 (以及解决配置了svg-sprite-loader但还是不显示svg图标的问题)_第6张图片
  4. 新建 组件iconfont,并将刚才下载的压缩包解压到 iconfont组件目录下
    Vue使用svg图标 | uniapp使用svg图标 (以及解决配置了svg-sprite-loader但还是不显示svg图标的问题)_第7张图片
    icon.vue





完成!!!!
使用方法:找到自己项目(刚刚在阿里图标库创建的项目)里的图标name

<iconfont name="shaixuan"></iconfont>

3.svg知识

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。
SVG 使用 XML 格式定义图像。
一个简单的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 xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>

SVG 代码解析:

第一行包含了 XML 声明。请注意 standalone 属性!该属性规定此 SVG 文件是否是"独立的",或含有对外部文件的引用。
standalone=“no” 意味着 SVG 文档会引用一个外部文件 - 在这里,是 DTD 文件。
第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C,含有所有允许的 SVG 元素。
width 和 height 属性可设置此 SVG 文档的宽度和高度。
version 属性可定义所使用的 SVG 版本。
xmlns属性可定义 SVG 命名空间。此属性表示svg标记及其子标记属于名称空间为“http://www.w3.org/2000/svg”的XML方言。注意,命名空间声明只需要在根标记上提供一次。声明定义了默认命名空间,因此用户代理知道所有svg标签的后代标签也属于同一命名空间。用户代理检查他们是否属于同一个命名空间,如果是的话才去如何处理命名空间下的标签标记。
  注意,命名空间名称只是字符串,尽管SVG命名空间名称看起来像URI,但这并不重要。URI通常被使用,因为它们是唯一的,目的不是“链接”某处。(事实上​​,URI经常使用,通常使用术语“命名空间URI”而不是“命名空间名称”。)
circle标签创建圆
stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽,黑边框。
fill属性设置形状内的颜色。我们把填充颜色设置为红色。
use属性使用URI引用一个元素,svg或其他具有一个唯一的ID属性和重复的图形元素。复制的是原始的元素,因此文件中的原始存在只是一个参考。原始影响到所有副本的任何改变。



你可能感兴趣的:(bug解决方法,svg,vue,uni-app,icons)