Cannot import fontello generated css in React

Question

Cannot import fontello generated css in React

128 views Asked by Joey At 25 November 2024 at 05:26

When I want to import Fontello auto-generated CSS file in my App.jsx it gives me an error:

./src/assets/fontello/css/fontello.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/assets/fontello/css/fontello.css)
    Syntax error: Unknown word (58:1)

  56 | }
  57 |  
> 58 | .icon-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;14.766&quot; viewBox=&quot;0 0 16 14.766&quot;&gt;   &lt;g id=&quot;Examples&quot; transform=&quot;translate(-246.5 -7.77)&quot;&gt;     &lt;g id=&quot;albums-outline&quot; transform=&quot;translate(198.5 -56.23)&quot;&gt;       &lt;g id=&quot;Group_59&quot; data-name=&quot;Group 59&quot; transform=&quot;translate(48 67.432)&quot;&gt;         &lt;path id=&quot;Path_67&quot; data-name=&quot;Path 67&quot; d=&quot;M62.27,171.334H49.727A1.747,1.747,0,0,1,48,169.567v-7.8A1.749,1.749,0,0,1,49.727,160H62.273A1.749,1.749,0,0,1,64,161.767v7.8A1.752,1.752,0,0,1,62.27,171.334ZM49.727,161.259a.5.5,0,0,0-.5.508v7.8a.5.5,0,0,0,.5.508H62.273a.5.5,0,0,0,.5-.508v-7.8a.5.5,0,0,0-.5-.508Z&quot; transform=&quot;translate(-48 -160)&quot; fill=&quot;#30c0b0&quot;/&gt;       &lt;/g&gt;       &lt;g id=&quot;Group_60&quot; data-name=&quot;Group 60&quot; transform=&quot;translate(49.716 64)&quot;&gt;         &lt;path id=&quot;Path_68&quot; data-name=&quot;Path 68&quot; d=&quot;M113.269,80h8.883M112,81.716h11.42&quot; transform=&quot;translate(-111.428 -79.428)&quot; fill=&quot;#30c0b0&quot;/&gt;         &lt;path id=&quot;Path_69&quot; data-name=&quot;Path 69&quot; d=&quot;M107.936,66.86H96.628a.575.575,0,1,1,0-1.144h11.308a.575.575,0,1,1,0,1.144Zm-1.256-1.716h-8.8a.575.575,0,1,1,0-1.144h8.8a.575.575,0,1,1,0,1.144Z&quot; transform=&quot;translate(-96 -64)&quot; fill=&quot;#30c0b0&quot;/&gt;       &lt;/g&gt;     &lt;/g&gt;   &lt;/g&gt; &lt;/svg&gt;albums-outline:before { content: '\e801'; } /* '' */
     | ^
  59 | .icon-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;14.766&quot; viewBox=&quot;0 0 16 14.766&quot;&gt;   &lt;g id=&quot;Examples&quot; transform=&quot;translate(-246.5 -7.77)&quot;&gt;     &lt;g id=&quot;albums-outline&quot; transform=&quot;translate(198.5 -56.23)&quot;&gt;       &lt;g id=&quot;Group_59&quot; data-name=&quot;Group 59&quot; transform=&quot;translate(48 67.432)&quot;&gt;         &lt;path id=&quot;Path_67&quot; data-name=&quot;Path 67&quot; d=&quot;M62.27,171.334H49.727A1.747,1.747,0,0,1,48,169.567v-7.8A1.749,1.749,0,0,1,49.727,160H62.273A1.749,1.749,0,0,1,64,161.767v7.8A1.752,1.752,0,0,1,62.27,171.334ZM49.727,161.259a.5.5,0,0,0-.5.508v7.8a.5.5,0,0,0,.5.508H62.273a.5.5,0,0,0,.5-.508v-7.8a.5.5,0,0,0-.5-.508Z&quot; transform=&quot;translate(-48 -160)&quot; fill=&quot;#30c0b0&quot;/&gt;       &lt;/g&gt;       &lt;g id=&quot;Group_60&quot; data-name=&quot;Group 60&quot; transform=&quot;translate(49.716 64)&quot;&gt;         &lt;path id=&quot;Path_68&quot; data-name=&quot;Path 68&quot; d=&quot;M113.269,80h8.883M112,81.716h11.42&quot; transform=&quot;translate(-111.428 -79.428)&quot; fill=&quot;#30c0b0&quot;/&gt;         &lt;path id=&quot;Path_69&quot; data-name=&quot;Path 69&quot; d=&quot;M107.936,66.86H96.628a.575.575,0,1,1,0-1.144h11.308a.575.575,0,1,1,0,1.144Zm-1.256-1.716h-8.8a.575.575,0,1,1,0-1.144h8.8a.575.575,0,1,1,0,1.144Z&quot; transform=&quot;translate(-96 -64)&quot; fill=&quot;#30c0b0&quot;/&gt;       &lt;/g&gt;     &lt;/g&gt;   &lt;/g&gt; &lt;/svg&gt;chatbubble-outline:before { content: '\e802'; } /* '' */
  60 | .icon-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;14.766&quot; viewBox=&quot;0 0 16 14.766&quot;&gt;   &lt;g id=&quot;Examples&quot; transform=&quot;translate(-246.5 -7.77)&quot;&gt;     &lt;g id=&quot;albums-outline&quot; transform=&quot;translate(198.5 -56.23)&quot;&gt;       &lt;g id=&quot;Group_59&quot; data-name=&quot;Group 59&quot; transform=&quot;translate(48 67.432)&quot;&gt;         &lt;path id=&quot;Path_67&quot; data-name=&quot;Path 67&quot; d=&quot;M62.27,171.334H49.727A1.747,1.747,0,0,1,48,169.567v-7.8A1.749,1.749,0,0,1,49.727,160H62.273A1.749,1.749,0,0,1,64,161.767v7.8A1.752,1.752,0,0,1,62.27,171.334ZM49.727,161.259a.5.5,0,0,0-.5.508v7.8a.5.5,0,0,0,.5.508H62.273a.5.5,0,0,0,.5-.508v-7.8a.5.5,0,0,0-.5-.508Z&quot; transform=&quot;translate(-48 -160)&quot; fill=&quot;#30c0b0&quot;/&gt;       &lt;/g&gt;       &lt;g id=&quot;Group_60&quot; data-name=&quot;Group 60&quot; transform=&quot;translate(49.716 64)&quot;&gt;         &lt;path id=&quot;Path_68&quot; data-name=&quot;Path 68&quot; d=&quot;M113.269,80h8.883M112,81.716h11.42&quot; transform=&quot;translate(-111.428 -79.428)&quot; fill=&quot;#30c0b0&quot;/&gt;         &lt;path id=&quot;Path_69&quot; data-name=&quot;Path 69&quot; d=&quot;M107.936,66.86H96.628a.575.575,0,1,1,0-1.144h11.308a.575.575,0,1,1,0,1.144Zm-1.256-1.716h-8.8a.575.575,0,1,1,0-1.144h8.8a.575.575,0,1,1,0,1.144Z&quot; transform=&quot;translate(-96 -64)&quot; fill=&quot;#30c0b0&quot;/&gt;       &lt;/g&gt;     &lt;/g&gt;   &lt;/g&gt; &lt;/svg&gt;checkmark-done-outline:before { content: '\e803'; } /* '' */

You can download the complete CSS files from here (Click red button on right side of page).

I don't have special config for Webpack. And I'm not sure if it's related to Webpack or not. Also I tried to remove node_modules and reinstall packages but did not worked.

Original Q&A

There are 1 answers

**Joey** · Accepted Answer · 2020-12-16 07:39:25

Joey On 16 December 2020 at 07:39 BEST ANSWER

I finally found the solution. The problem is with .fontello-session file. I don't know exactly what is the problem but deleting it makes everything to work again.

TechQA.

Cannot import fontello generated css in React

There are 1 answers

Related Questions in CSS

Related Questions in REACTJS

Related Questions in FONTELLO

Popular Questions

Popular Tags

Trending Questions