• 在Vue中使用svg图标即封装自定义svg-icon标签


    参考 Vue项目中使用svg图标   这篇软文质量不错, 依葫芦画瓢,也跑通了

    1.慢慢在理解其中包含的知识

    2. 把自己理解换一种方式表达一下

     我们想在vue页面使用svg图标,例如

    <template>
      <div>
        <h1>Svg实践,在页面中使用</h1>
        <svg-icon icon-class="add"></svg-icon>
        <svg-icon icon-class="auto"></svg-icon>
      </div>
    </template>
    
    <script>
    export default {
      props: {},
      components: {},
      data() {
        return {};
      },
      computed: {},
      created() {},
      mounted() {},
      watch: {},
      methods: {}
    };
    </script>

    参考上面的文章

    以上代码是svg的原生用法(正确性未验证)

    1. src/icons 目录, 导入 svg 资源文件

    2. npm install svg-sprite-loader --save-dev =>package.json

    3. 配置webpack.base.conf.js(build文件夹中)
    //设置Webpack 用 svg-sprite-loader 加载, src/icons 目录的内容,
    换一种方式:
    1). 在 rules 下增加

    {
        test: /.svg$/,
        loader: "svg-sprite-loader",
        include: [resolve("src/icons")],
        options: {
            symbolId: "icon-[name]"
        }
    },    

    //实际效果是,上面配置后webpack会加载src/icons下的index.js

    2). webpack.base.conf.js 原生的 loader: 'url-loader',中去掉svg,就不再额外添加
    指令: exclude:[resolve('src/icons')] ,

    如下:

    {
        test: /.(png|jpe?g|gif)(?.*)?$/,
        loader: 'url-loader',
        options: {
            limit: 10000,
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
    },

    4. 自定义svg组件封装svg功能

    基础核心知识
    srciconsindex.js 中
    import SvgIcon from '@/components/SvgIcon' 的加载行为
    加载 srccomponentsSvgIconindex.vue

    <svg :class="svgClass" aria-hidden="true" v-on="$listeners">

    在Vue中使用svg图标即封装自定义svg-icon标签
    如在 SvgDemo.vue 使用如下标签

    <template>
        <div>
            <h1>Svg实践,在页面中使用</h1>
            <svg-icon icon-class="add"></svg-icon>
            <svg-icon icon-class="auto"></svg-icon>
        </div>
    </template>                
  • 相关阅读:
    oracle数据库sql中文乱码问题,字符编码环境变量
    oracle数据库序列自增id
    上线注意事项
    impdp 导出导入注意事项
    linux 上不同用户权限问题
    plsql 工具命令窗口执行sql脚本问题
    oracle创建用户
    Redis会遇到的15个坑
    JavaScript的标准库
    JavaScript的运算符
  • 原文地址:https://www.cnblogs.com/zhuji/p/13135015.html
Copyright © 2020-2023  润新知